安裝vue-pull-to

npm install vue-pull-to --save

在需要的元件中引用並註冊

import PullTo from 'vue-pull-to'
...
components: {PullTo},

使用元件

<pull-to
        :bottom-load-method="infiniteHandler"
        :is-top-bounce=false
        :bottom-config="BOTTOM_DEFAULT_CONFIG">
</pull-to>        
 

將這段程式碼套在需要完成上拉載入的外面 需要注意的是，vue-pull-to的父元件必須要給定高度，否則移動端上拉手勢失效

pull-to提示文字的配置

 BOTTOM_DEFAULT_CONFIG: {
          pullText: "上滑繼續載入",
          triggerText: "釋放更新",
          loadingText: "載入中,請稍後",
          doneText: "內容已全部展示了",
          failText: "載入失敗",
          loadedStayTime: 1000,
          stayDistance: 50,
          triggerDistance: 50,
          list: ""
        },
 

這裡講一下對上拉載入的理解，後臺對展示資料做了分頁處理，螢幕上預設展示第一頁，當拉到底部時，使頁數加一，在請求後臺資料，並將其加入到之前的陣列。螢幕拉到底部的函式時間pull-to元件已經自己設定好了，不需要再去處理，這裡貼一下拉到底部後請求後臺資料的程式碼

  infiniteHandler(loaded) {
            this.pages++;//頁碼數加一
            console.log(this.pages);
            this.$http({
              url: '介面',
              method: 'post',
              data: {
               引數：數值
              }
            })
              .then(response => {
              console.log(response);
              let data = response.data.data;
              this.maxPage = data.all_page;//獲取後臺資料總頁數
              if (this.pages <= this.maxPage) {
                console.log(this.pages);
                this.categoryList = this.categoryList.concat(data.list);//將獲取的資料加入原先的陣列
                this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
                loaded("done");//結束上拉
              } else {
                this.BOTTOM_DEFAULT_CONFIG.doneText = "內容已全部展示";
                //結束重新整理功能
                loaded("done");
              }
            });
          }
 

這就是用pull-to完成上拉載入的步驟了，希望大家開心