vue插件mescroll.js實現(xiàn)移動端上拉加載和下拉刷新

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

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

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

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

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

.mescroll {
  position: fixed;
  padding-bottom: 1rem;
  top: 2px;
  bottom: 0;
  height: auto;
}

htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加載中..</p>', //上拉加載中的布局
htmlNodata: '<p class="upwarp-nodata">-- END --</p>', //無數(shù)據(jù)的布局

-webkit-overflow-scrolling:touch;