做一個簡單的移動端展示項目，后臺分頁后前端加載，實現上拉加載下一頁，找了下，還是用這個mescroll.js插件好一點

1.npm安裝

npm install --save mescroll.js //不要使用cnpm安裝

導入(在哪個頁面使用,則在哪個頁面導入(這里的話，我使用全局導入會出現問題,若有錯,還請大家指出,暫時想到的就是局部引入))：

import MescrollVue from ‘mescroll.js/mescroll.vue'

注冊組件：

components: {  MescrollVue // 注冊mescroll組件},

template使用

<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" class="scrollView"></mescroll-vue>

2.data里進行相關配置

data () { return {  mescroll: null, // mescroll實例對象  mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加載處理的邏輯是一樣的,則mescrollDown可不用寫了)  mescrollUp: { // 上拉加載的配置.    callback: this.upCallback, // 上拉回調,此處簡寫; 相當于 callback: function(page, mescroll) { }    //以下是一些常用的配置,當然不寫也可以的.    page: {      num: 0, //當前頁 默認0,回調之前會加1; 即callback(page)會從1開始      size: 10 //每頁數據條數,默認10    },    noMoreSize: 5, //如果列表已無數據,可設置列表的總數量要大于5才顯示無更多數據;避免列表數據過少(比如只有一條數據),顯示無更多數據會不好看    toTop: {      //回到頂部按鈕      src: "./static/mescroll/mescroll-totop.png", //圖片路徑,默認null,支持網絡圖      offset: 1000 //列表滾動1000px才顯示回到頂部按鈕    },    htmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新 </p>', //布局內容    empty: {      //列表第一頁無任何數據時,顯示的空提示布局; 需配置warpId才顯示      warpId: "xxid", //父布局的id (1.3.5版本支持傳入dom元素)      icon: "./static/mescroll/mescroll-empty.png", //圖標,默認null,支持網絡圖      tip: "暫無相關數據~" //提示    }  },  articleList: [] // 列表數據 }},beforeRouteEnter (to, from, next) { // 如果沒有配置回到頂部按鈕或isBounce,則beforeRouteEnter不用寫  next(vm => {   vm.$refs.mescroll.beforeRouteEnter() // 進入路由時,滾動到原來的列表位置,恢復回到頂部按鈕和isBounce的配置  })},beforeRouteLeave (to, from, next) { // 如果沒有配置回到頂部按鈕或isBounce,則beforeRouteLeave不用寫  this.$refs.mescroll.beforeRouteLeave() // 退出路由時,記錄列表滾動的位置,隱藏回到頂部按鈕和isBounce的配置  next()},methods: { mescrollInit(mescroll) {   this.mescroll = mescroll; }, upCallback(page, mescroll) {  this.$Request({    url: "",    method: "get",    data: {     page: page.num    },    success: res => {     if (res.status == 1) {      let data = page.num == 1 ? [] : this.articleList;      data.push(...res.result.data);      this.articleList = data;      // 數據渲染成功后,隱藏下拉刷新的狀態      this.$nextTick(() => {       mescroll.endSuccess(res.result.data.length);      });     }    }  }); } }}