用vue-scroller做上拉刷新，下拉加載的模板（簡單明了，通用）

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.接下來就是最重要的邏輯代碼了

 

    （1）在data里面我定義了4個參數（這里是做上拉刷新下拉加載需要用到的參數）

 　　

data() {
            return {
                noDate:false,//這是一個判斷是否加載的開關
                arr:[]，
                page:1,
                pageSize:10
            }
        }

           

 

 　 （2）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了！！！