vue中使用better-scroll滚动条插件

应用场景：

　　overflow: hidden会让超出的部分隐藏，并且无法拖拽，所以可使用插件让长列表限定的区域滚动拖拽。

参考：https://zhuanlan.zhihu.com/p/27407024

1.去github搜素better-scroll，在终端安装：

npm install better-scroll --save

2.html结构

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

　　BetterScroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素，当然可以是ul，也可以是div。这里要注意的是，BetterScroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。

3.script标签中引入并使用插件

<script>
  import BScroll from 'better-scroll'
  export default {
    mounted() {
      this.$nextTick(() => {
        this.scroll = new Bscroll(this.$refs.wrapper, {})
      })
    }
  }
</script>

　　Vue.js 提供了一个获取 DOM 对象的接口—— vm.$refs。通过了 this.$refs.wrapper访问到了这个 DOM 对象，并在 mounted 钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。

在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的（20 ms 是一个经验值，每一个 Tick 约为 17 ms），对用户体验而言都是无感知的。

4.ajax动态获取数据（axios使用方法https://www.cnblogs.com/VCplus/p/11655329.html）

　　通常把ajax请求放在最外层的组件，以减少请求次数。

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li v-for="item in data">{{item}}</li>
    </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    data() {
      return {
        data: []
      }
    },
    created() {
      requestData().then((res) => {
        this.data = res.data
        this.$nextTick(() => {
          this.scroll = new Bscroll(this.$refs.wrapper, {})
        })
      })
    }
  }
</script>

这里的 requestData 是伪代码，作用就是发起一个 http 请求从服务端获取数据，并且这个函数返回的是一个 promise（实际项目中我们可能会用 vue-resource）。我们获取到数据的后，需要通过异步的方式再去初始化 better-scroll，因为 Vue 是数据驱动的， Vue 数据发生变化（this.data = res.data）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick，当然替换成 setTimeout(fn, 20) 也是可以的。

为什么这里在 created 这个钩子函数里请求数据而不是放到 mounted 的钩子函数里？因为 requestData 是发送一个网络请求，这是一个异步过程，当拿到响应数据的时候，Vue 的 DOM 早就已经渲染好了，但是数据改变 —> DOM 重新渲染仍然是一个异步过程，所以即使在我们拿到数据后，也要异步初始化 better-scroll。