https://mint-ui.github.io/docs/#/zh-cn2/loadmore
1. <mt-loadmore></nt-loadmore>标签写在vue文件<template>
标签的根目录
2.
/* 重新加载数据 */
loadTop() {
this.page = 1
this.getData()
this.$refs.loadmore.onTopLoaded();
},
/* 加载更多数据 */
loadBottom() {
this.getData()
this.$refs.loadmore.onBottomLoaded();
},
/* 请求数据函数 */
getData() {
this.allLoaded = false // 当 刷新时 可进行下拉
user.msgs.r({page: this.page}).then( ( res=>{ // 请求接口获取数据
let ret=res.data;
if( ret.error == 0){
if( this.page == 1 ) { // 当为第一页时直接赋值 否则 追加
this.dataList= ret.data.data;
}else {
this.dataList= this.dataList.concat(ret.data.data);
}
// 当 返回数据大于等于 20 条时 说明还有下一页
if(ret.data.data.length>=20) {
this.page++
}else {
this.allLoaded = true; //若数据已全部获取完毕 禁止底部上拉函数执行
}
}
}))
}
