Vue - better-scroll

better-scroll参考资料

Github、1.x文档、2.x文档

better-scroll介绍

基于原生 JS 实现的，不依赖任何框架。完美运用于 Vue、React 等 MVVM 框架

1.x版本与2.x版本比较

1.x是引入整个better-scroll功能代码，体积大。2.x只提供了基础核心功能，体积更小。如果需要使用下拉加载，上拉刷新等功能，需要额外安装对应的插件

使用注意事项

• 父容器需要有高度，且只滚动父容器下的第一个元素（这个元素的整体高度，需要大于父容器高度才可滚动）
• DOM发生变化之后，要使用 bs.refresh() 重新计算滚动高度，在 this.$nextTick(() => { this.bs.refresh() })

创建实例

mounted() {
  this.scrollInit() // 在挂载完成之后执行
},
beforeDestroy() {
  this.bs.destroy() // 页面销毁时调用
},
methods: {
  scrollInit() {
    this.bs = new BScroll('.wrapper', { // 可以使用字符串，或通过 this.$refs.xxx
      scrollY: true, // 沿Y轴滚动
      click: true,   // 设置为 true，才能触发元素点击事件
      probeType: 3   // 监听 scroll 事件
    })
    this.bs.on('scroll', (pos) => {
      console.log(pos.y)
    })
  }
}

如果内容存在图片的情况，可能会出现 DOM 元素渲染时图片还未下载，因此内容元素的高度小于预期，出现滚动不正常的情况。此时你应该在图片加载完成后，比如 onload 事件回调中，调用 bs.refresh()，它会重新计算最新的滚动距离。

JS监听滚动（Vue）

export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  // 在每个页面销毁（destroyed）或隐藏（deactivated）时取消监听
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    }
  }	
}