1.首先下外掛,並在你的vue專案中引人

npm i vue-scroller -D

import VueScroller from 'vue-scroller

2.Vue.use(VueScroller )（這一步別忘啦）

3.在你需要做上拉重新整理，下拉載入的地方加上<scroller></scroller>標籤（附上我的程式碼，這個自行替換,一般都是做列表的時候加）

<scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller"> 　　<ul> 　　　　<li v-for="(item,i) in arr"  :key="i"> 　　　　</li> 　　</ul> </scroller> 4.接下來就是最重要的邏輯程式碼了 在data裡面我定義了4個引數（這裡只是做上拉重新整理下拉載入需要用到的引數） data(){ 　　return { 　　　　arr:[], 　　　　noData:false, 　　　　page:1,//當前頁 　　　　pageSize:15//每頁多少資料，這個數值不固定，看自己的介面 　　} } methods裡面定義三個方法 methods:{ 　　    // 獲取資料    getData(){        var that=this;        axios.get('/api/article/findArticleList',{params:{pageNum:that.page,pageSize:that.pageSize}}) 　　　　 .then(function(data){                          if(data.data.success){ 　　　　　　　　  //這一步是判斷你當前請求的這一頁資料是不是最後一頁，如果是最後一頁就不能請求了（這個根據後端給的介面判斷，只要能判斷出就行了，如果是最後一頁給that.noDate=true）                                that.noDate=data.data.data.isLastPage;                                // 判斷是下拉重新整理還是上拉載入（這一步也是比較巧妙的，當然也很好理解）                                if(that.page==1){                                      that.arr=data.data.data.list;                              }else{                                       that.arr=that.arr.concat(data.data.data.list)                               }                           }                      })         }，     // 下拉重新整理    refresh(){        this.page=1;//重置頁數重新整理每次頁數都是第一頁        this.noDate=false;//重置資料判斷        setTimeout(function(){            this.getData();            this.$refs.myscroller.finishPullToRefresh();//重新整理完畢關閉重新整理的轉圈圈        }.bind(this),1700)    },   // 上拉載入    infinite(done){        if(this.noDate){               this.$refs.myscroller.finishInfinite(true);//這個方法是不讓它載入了，顯示“沒有更多資料”，要不然會一直轉圈圈       }else{            setTimeout(() => {                  this.page++;//下拉一次頁數+1                  this.getData();                  done();//進行下一次載入操作            }, 1500);      }    }, } 5.因為剛開始要有資料，最後在mounted裡面呼叫一下this.getData();就ok了！！！   （是不是感覺超級簡單啊，最後感覺有用就點個贊吧~~~~）