BScroll.prototype._end = function (e) {
...
if (this.options.momentum && duration < this.options.momentumLimitTime && (absDistY > this.options.momentumLimitDistance || absDistX > this.options.momentumLimitDistance)) {
let momentumX = this.hasHorizontalScroll ? momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options)
: {destination: newX, duration: 0}
let momentumY = this.hasVerticalScroll ? momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options)
: {destination: newY, duration: 0}
newX = momentumX.destination
newY = momentumY.destination
time = Math.max(momentumX.duration, momentumY.duration)
this.isInTransition = 1
}
...
}
function momentum(current, start, time, lowerMargin, wrapperSize, options) {
...
let distance = current - start
let speed = Math.abs(distance) / time
...
let duration = swipeTime
let destination = current + speed / deceleration * (distance < 0 ? -1 : 1)
...
}
// Slow down or stop if outside of the boundaries
if (newY > 0 || newY < this.maxScrollY) {
if (this.options.bounce) {
newY = this.y + deltaY / 3
} else {
newY = newY > 0 ? 0 : this.maxScrollY
}
}
BScroll.prototype.resetPosition = function (time = 0, easeing = ease.bounce) {
...
let y = this.y
if (!this.hasVerticalScroll || y > 0) {
y = 0
} else if (y < this.maxScrollY) {
y = this.maxScrollY
}
...
this.scrollTo(x, y, time, easeing)
...
}
{{item}}
import BScroll from 'better-scroll'
const options = {
scrollY: true // 因为scrollY默认为true,其实可以省略
}
this.scroll = new BScroll(this.$refs.wrapper, options)
// 在 Vue 中,保证列表渲染完成时,初始化 BScroll
mounted() {
setTimeout(() => {
this.scroll = new BScroll(this.$refs.wrapper, options)
}, 20)
},
// fade 默认为 true,滚动条淡入淡出
options.scrollbar = true
// 滚动条一直显示
options.scrollbar = {
fade: false
}
this.scroll = new BScroll(this.$refs.wrapper, options)
options.pullDownRefresh = {
threshold: 50, // 当下拉到超过顶部 50px 时,触发 pullingDown 事件
stop: 20 // 刷新数据的过程中,回弹停留在距离顶部还有 20px 的位置
}
this.scroll = new BScroll(this.$refs.wrapper, options)
this.scroll.on('pullingDown', () => {
// 刷新数据的过程中,回弹停留在距离顶部还有20px的位置
RefreshData()
.then((newData) => {
this.data = newData
// 在刷新数据完成之后,调用 finishPullDown 方法,回弹到顶部
this.scroll.finishPullDown()
})
})
options.pullUpLoad = {
threshold: -20 // 在上拉到超过底部 20px 时,触发 pullingUp 事件
}
this.scroll = new BScroll(this.$refs.wrapper, options)
this.scroll.on('pullingDown', () => {
loadData()
.then((newData) => {
this.data.push(newData)
})
})
options.wheel = {
selectedIndex: 0,
rotate: 25,
adjustTime: 400
}
// 初始化选择器的每一列
this.wheels[i] = new BScroll(wheelWrapper.children[i], options)
data() {
return {
tempIndex: [0, 0, 0]
}
},
...
// 监听每个选择列表的选择
this.wheels[i].on('scrollEnd', () => {
this.tempIndex.splice(i, 1, this.wheels[i].getSelectedIndex())
})
...
// 根据当前选择项,确定其他选择列表的内容
computed: {
linkageData() {
const provinces = provinceList
const cities = cityList[provinces[this.tempIndex[0]].value]
const areas = areaList[cities[this.tempIndex[1]].value]
return [provinces, cities, areas]
}
},
options = {
scrollX: true,
snap: {
loop: true, // 开启循环播放
stepX: 200, // 每页宽度为 200px
stepY: 100, // 每页高度为 100px
threshold: 0.3, // 滚动距离超过宽度/高度的 30% 时切换图片
speed: 400 // 切换动画时长 400ms
}
}
this.slide = BScroll(this.$refs.slide, options)
options.probeType = 3
this.scroll = new BScroll(this.$refs.wrapper, options)
this.scroll.on('scroll', (pos) => {
const y = pos.y
for (let i = 0; i < listHeight.length - 1; i++) {
let height1 = listHeight[i]
let height2 = listHeight[i + 1]
if (-y >= height1 && -y < height2) {
this.currentIndex = i
}
}
})
scrollTo(index) {
this.$refs.indexList.scrollToElement(this.$refs.listGroup[index], 0)
}
options = {
scrollX: true,
snap: {
loop: false
}
}
this.slide = BScroll(this.$refs.slide, options)
options.freeScroll = true
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有