移動端上拉加載和下拉刷新的vue插件

作一個簡單的移動端展現項目，後臺分頁後前端加載，實現上拉加載下一頁，找了下，仍是用這個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);
          });
        }
      }
   });
 }
}
}
複製代碼

3.style樣式

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

複製代碼

具體的配置能夠參考：mescroll配置

4.加載完成後

能夠在data中的mescrollUp項中進行底部沒有更多數據時的提示信息,'END'及'加載中...'這些內容能夠本身設置

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

複製代碼

能夠查看源碼進行設置: mescroll源碼（GitHub）

5.scroll屬性在ios手機上回出現卡頓問題

在進行滾動的這個容器樣式中添加這個屬性：

-webkit-overflow-scrolling:touch;

複製代碼

填加了這個兼容會致使定位爲position：fixed的失去效果，使用position：absolute能夠解決

這裏推薦一下個人前端學習交流羣：784783012，裏面都是學習前端的，若是你想製做酷炫的網頁，想學習編程。本身整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工做中想提高本身能力的，正在學習的小夥伴歡迎加入學習。