https://mint-ui.github.io/docs/#/zh-cn2/loadmore
1. <mt-loadmore></nt-loadmore>標簽寫在vue文件<template>
標簽的根目錄
2.
/* 重新加載數(shù)據(jù) */
loadTop() {
this.page = 1
this.getData()
this.$refs.loadmore.onTopLoaded();
},
/* 加載更多數(shù)據(jù) */
loadBottom() {
this.getData()
this.$refs.loadmore.onBottomLoaded();
},
/* 請求數(shù)據(jù)函數(shù) */
getData() {
this.allLoaded = false // 當(dāng) 刷新時 可進行下拉
user.msgs.r({page: this.page}).then( ( res=>{ // 請求接口獲取數(shù)據(jù)
let ret=res.data;
if( ret.error == 0){
if( this.page == 1 ) { // 當(dāng)為第一頁時直接賦值 否則 追加
this.dataList= ret.data.data;
}else {
this.dataList= this.dataList.concat(ret.data.data);
}
// 當(dāng) 返回數(shù)據(jù)大于等于 20 條時 說明還有下一頁
if(ret.data.data.length>=20) {
this.page++
}else {
this.allLoaded = true; //若數(shù)據(jù)已全部獲取完畢 禁止底部上拉函數(shù)執(zhí)行
}
}
}))
}
