一、背景需求

BetterScroll 是一款重點解決移動端（已支援 PC）各種滾動場景需求的外掛
它的核心靈感來自於 iscroll 的實現
它的 API 設計基本相容 iscroll，在 iscroll 的基礎上又擴充套件了一些 feature 以及做了一些效能優化

在一個以長列表為主要內容的vue頁面中
我們希望使用者在劃到底部或劃回頂部時 頁面呈現彈性的動態效果
這就需要藉助 better-scroll 外掛來實現

二、安裝和引入

參照 better-scroll 的官方文件
全域性安裝

npm install better-scroll --save

在子元件中區域性引入

import BScroll from 'better-scroll'
 

三、基礎用法

最常見的應用場景是列表滾動，HTML結構如下：

<div class="wrapper" ref="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 這裡可以放一些其它的 DOM，但不會影響滾動 -->
</div>

要注意的是 BetterScroll作用在外層的wrapper容器上
並且只處理wrapper第一個子元素的滾動

在子元件的mounted生命週期鉤子中
傳入對應的DOM元素，例項化 Bscroll 物件

export default {
  name: ' ',
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}