better-scroll 是移动开发中常用的滚动组件。在移动端做滚动有许多细节需要注意，一不小心就会踩坑。而 bs 的作者封装了一个适用于移动端的滚动组件，提供了一系列滚动的方法，开发者们不用再造轮子，踩雷。而这篇文章就是整理总结 bs 的正确打开方式

better-scroll 不可滚动

better-scroll 有两层关系，最外层是 wrapper，滚动的是装载在第一个子元素 content 内的内容。better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。此外，需要给 wrapper 一个高度

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

this.scroll = new BScroll(this.$refs.wrapper, {
  click: true,
  tap: true,
  probeType: 2
})

监听不到 scroll 事件、无法点击

1. scroll 事件需要派发，创建 better-scroll 时由 probeType 属性控制，不派发 scroll 事件则无法监听
2. better-scroll 默认禁用了 click 和 tap 事件，在创建时开启事件

this.scroll = new BScroll(this.$refs.wrapper, {
  // 开启 click 事件
  click: true,
  // 开启 tap 事件
  tap: true,
  // 派发滚动事件，默认是 0，不派发
  // 1 -> 延时派发
  // 2 -> 滚动时实时派发
  // 3 -> 任何动画效果过程都实时派发
  probeType: 2
})

滚动时 click 事件不能实时响应

better-scroll 滚动过程中是不允许点击的，bounce 动画的时候也是不允许点击的，可以取消 bounce 动画或者缩短 bounce 动画的时间

动态改变 better-scroll 中的数据，可滚动区域延迟或不响应

每次修改完数据之后，需要 refresh 一次，建议 watch 中监听到数据改变就刷新

watch: {
  // 每次修改 BScroll 内容的高度，需要在 nextTick 中 refresh
  groupListData: {handler() {this.$nextTick(() => {this.scroll.refresh()
      }) },
    deep: true
  }
}

上拉加载、下拉刷新后延迟响应

better scroll 提供下拉和上拉事件:

1. 下拉刷新事件: pullingDown
2. 上拉加载事件: pullingUp

在执行完事件之后，必须执行对应的声明完成的方法: 下拉刷新用 finishPullDown 来声明执行完毕；上拉加载用 finishPullUp 来声明执行完毕。

此外，如果修改了 better scroll 中 content 的长度，必须要 refresh 一次。也建议在 watch 中监听数据变化

// 下拉刷新
this.scroll.on('pullingDown', () => {// do sth...})

// 上拉加载
this.scroll.on('pullingUp', () => {// do sth...})

横向 better-scroll

better-scroll 可以设置成横向滚动。通过设置 scrollX 的值以及禁用 scrollY 的值实现滚动效果。

• 禁用 scrollY 可能导致页面无法下滑，需要声明 eventPassthrough 为 vertical 来确保页面纵向使用原生滚动
• 横向滚动时默认不会派发 scroll 事件，需要声明 probeType

this.scroll = new BScroll(this.$refs.tab, {
  startX: 0,
  click: true,
  tap: true,
  // 允许横向滚动，禁止纵向滚动
  scrollX: true,
  scrollY: false,
  // 纵向使用原生滚动，不禁用纵向滚动事件
  eventPassthrough: 'vertical',
  // 派发滚动事件
  probeType: 2
})