2020-08-26 vue滚动插件better-scroll的使用

jQ时代滚动一般用nicescroll，很好很强大;vue试用下新的插件：better-scroll

我用到的场景是横向滚动，不过要注意的事这款插件并不能用鼠标滚轮滚动，只能用tap的方式滚动，所以说更加契合移动端

安装：

yarn add @better-scroll/core@next

横向滚动demo：

<div class="wrapper">
  <ul class="content">
    <li v-for="(item,index) in data" :key="index"></li>
  </ul>
</div>

.wrapper{
  white-space: nowrap;//li不换行
  overflow: auto;
  .content{
    display: inline-block;
  }
}

import BScroll from '@better-scroll/core'

mounted() {
  this.init()
},
beforeDestroy() {
  this.bs.destroy()
},
methods: {
  init() {
    this.bs = new BScroll(this.$refs.wrapper, {
      scrollX: true,
      probeType: 3 // listening scroll hook
    })
    this._registerHooks(['scroll', 'scrollEnd'], (pos) => {
      console.log('done')
    })
  },
  _registerHooks(hookNames, handler) {
    hookNames.forEach((name) => {
      this.bs.on(name, handler)
    })
  }

参考: BetterScroll 2.x

黄轶 当 better-scroll 遇见 Vue