摘要：做一個(gè)簡單的移動(dòng)端展示項(xiàng)目，后臺(tái)分頁后前端加載，實(shí)現(xiàn)上拉加載下一頁，找了下，還是用這個(gè)插件好一點(diǎn)安裝不要使用安裝導(dǎo)入在哪個(gè)頁面使用則在哪個(gè)頁面導(dǎo)入這里的話，我使用全局導(dǎo)入會(huì)出現(xiàn)問題若有錯(cuò)還請(qǐng)大家指出暫時(shí)想到的就是局部引入注冊(cè)組件注冊(cè)組件

做一個(gè)簡單的移動(dòng)端展示項(xiàng)目，后臺(tái)分頁后前端加載，實(shí)現(xiàn)上拉加載下一頁，找了下，還是用這個(gè)mescroll.js插件好一點(diǎn)

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

導(dǎo)入(在哪個(gè)頁面使用,則在哪個(gè)頁面導(dǎo)入(這里的話，我使用全局導(dǎo)入會(huì)出現(xiàn)問題,若有錯(cuò),還請(qǐng)大家指出,暫時(shí)想到的就是局部引入))：

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

注冊(cè)組件：

components: {
    MescrollVue // 注冊(cè)mescroll組件
},

template使用

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

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

具體的配置可以參考：mescroll配置

可以在data中的mescrollUp項(xiàng)中進(jìn)行底部沒有更多數(shù)據(jù)時(shí)的提示信息,"END"及"加載中..."這些內(nèi)容可以自己設(shè)置

htmlLoading: "
加載中..
", //上拉加載中的布局
htmlNodata: "
-- END --
", //無數(shù)據(jù)的布局

可以查看源碼進(jìn)行設(shè)置: mescroll源碼（GitHub）

在進(jìn)行滾動(dòng)的這個(gè)容器樣式中添加這個(gè)屬性：

-webkit-overflow-scrolling:touch;

但是的話，填加了這個(gè)兼容會(huì)導(dǎo)致定位為position：fixed的失去效果，看了一些資料，使用position：absolute可以解決，這個(gè)我沒有具體的再去實(shí)驗(yàn)下，若有好的方法，還請(qǐng)大家能夠在評(píng)論里告知下，感激不盡

正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

webpack打包（有面試題）

純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）

畫三角形