溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
做一個簡單的移動端展示項目，后臺分頁后前端加載，實現上拉加載下一頁，找了下，還是用這個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樣式
.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可以解決，這個我沒有具體的再去實驗下，若有好的方法，還請大家能夠在評論里告知下，感激不盡
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
