BetterScroll在移动端滚动场景的应用

BScroll.prototype._end = function (e) {
  ...
  if (this.options.momentum && duration  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 <p>边缘回弹</p><p>超过边缘时的回弹，有两个处理步骤，第一步是滚动到超过边界时速度要变慢，第二步是回弹到边界。其中，第一步是在源码的 BScroll.prototype._move 函数，这是 touchmove 和 mousemove 事件的处理函数，也就是在用户滑动操作过程中的逻辑。</p><pre class="brush:php;toolbar:false">// Slow down or stop if outside of the boundaries
if (newY &gt; 0 || 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 <p>流畅的滚动仅仅是基础，BetterScoll 真正的能力在于：提供了大量通用 / 定制的option 选项 、API 方法和事件，让各种滚动需求实现起来更高效。</p><p>如何应用于各种需求场景</p><p>下面，以结合 Vue 的使用为例，说一下 BetterScroll 在各种场景下的姿势。</p><p>普通滚动列表</p><p>比如，有如下列表：</p><pre class="brush:php;toolbar:false">{{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 = height1 &amp;&amp; -y <p>当点击索引时，使用 scrollToElement()方法 滚动到该索引区域。</p><pre class="brush:php;toolbar:false">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