better-scroll的使用

一、安装

npm install @better-scroll/core --save

二、在需要使用BetterScroll的页面引入：

import BScroll from '@better-scroll/core'

三、定义滚动列表

    <div class="wrapper-my" ref="wrapper">
      <ul>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
        <li>
          better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
        </li>
      </ul>
    </div>

四、实例化

  mounted () {
    setTimeout(() => {
      this.initScroll()
    }, 20)
  },
  methods: {
    initScroll () {
      const bs = new BScroll(this.$refs.wrapper, {
        click: true
      })
      console.log(bs)
      bs.on('scroll', (position) => {
        console.log(position.x, position.y)
      })
    }
  }

五、CSS

.wrapper-my {
  height: 100px;
  border: 2px solid red;
  box-sizing: border-box;
  overflow: hidden;
}

六、如果滚动无效，注意以下几点：
①DOM层级关系，常见的滚动列表：

 <div class="wrapper">
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>

注意：

• BetterScroll只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略
• 外盒子设置固定宽或高和属性：overflow: hidden;
• 只有content的高度大于wrapper高度时候，才可以滚动

②审查元素看dom结构，这样即添加成功的

③打印BScrollConstructor查看wrapper与content高度问题，wrapperHeight(100) < scrollerHeight(231)，hasVerticalScroll为true，以上就是可滚动的情况。如果这些数据不对，检查是否dom没有更新完就初始化BScroll了，要等dom更新完才能初始化。

七、BetterScroll 支持的参数非常多，如scrollX支持横向滚动，了解更多参数，可以查看文档配置项：BetterScroll2.0