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（實際項目中我們可能會用 axios 或者 vue-resource）。我們獲取到數據的后，需要通過異步的方式再去初始化 better-scroll，因為 Vue 是數據驅動的， Vue 數據發生變化（this.data = res.data）到頁面重新渲染是一個異步的過程，我們的初始化時機是要在 DOM 重新渲染后，所以這里用到了 this.$nextTick，當然替換成 setTimeout(fn, 20) 也是可以的。

為什么這里在 created 這個鈎子函數里請求數據而不是放到 mounted 的鈎子函數里？因為 requestData 是發送一個網絡請求，這是一個異步過程，當拿到響應數據的時候，Vue 的 DOM 早就已經渲染好了，但是數據改變 —> DOM 重新渲染仍然是一個異步過程，所以即使在我們拿到數據后，也要異步初始化 better-scroll。