我的目的是為了實現列表的下拉重新整理、上拉載入，所以選擇了better-scroll這個庫。
用好這個庫，需要理解下面說明

必須包含兩個大的div，外層和內層div
外層div設定可視的大小(寬或者高)-有限制寬或高
內層div，包裹整個可以滾動的部分
內層div高度一定大於外層div的寬或高，才能滾動

1、先開始寫一個簡單demo，最基本的程式碼架構

• template

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

• css

/*對外層div進行了高度上的限制*/
.wrapper {
    display: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height:300px;
    overflow:hidden;
}
.content {
    width:100%;
    height:800px;
    background:blue;
}

• script

import BScroll from 'better-scroll'
this
 
.scroll = new BScroll(new BScroll(this.$refs.wrapper))

2、進行改造升級，加上上拉重新整理、下拉載入的程式碼。

  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper, {
      // 上拉載入
      pullUpLoad: {
        // 當上拉距離超過30px時觸發 pullingUp 事件
        threshold: -30
      },
      // 下拉重新整理
      pullDownRefresh: {
        // 下拉距離超過30px觸發pullingDown事件
 

        threshold: 30,
        // 回彈停留在距離頂部20px的位置
        stop: 20
      }
    })
    this.scroll.on('pullingUp', () => {
      console.log('處理上拉載入操作')
      setTimeout(() => {
        // 事情做完，需要呼叫此方法告訴 better-scroll 資料已載入，否則上拉事件只會執行一次
        this.scroll.finishPullUp()
      }, 2000)
    })
    this.scroll.on('pullingDown', () => {
      console.log('處理下拉重新整理操作')
      setTimeout(() => {
        console.log('asfsaf')
        // 事情做完，需要呼叫此方法告訴 better-scroll 資料已載入，否則下拉事件只會執行一次
        this.scroll.finishPullDown()
      }, 2000)
    })
  }

原理已經講清楚了，上面的程式碼是一個功能示例，碼友結合自己專案擴充套件就行啦。