此组件一般用于标识页面底部加载数据时的状态,共有三种状态:
- 加载前,显示"加载更多",加入点击可选,是因为数据不够一页时,无法触发页面的
onReachBottom
生命周期 - 加载中,显示"正在加载...",2种动画可选
- 加载后,如果还有数据,回到"加载前"状态,否则加载结束,显示"没有更多了"
<u-loadmore :status="status" />
data:
list: [],
status: "loadmore",
pages: "1",
limit: {
pageNum: 1,
pageSize: 10,
},
onShow() {
this.init();
},
onLoad() {},
async onReachBottom() {
console.log("onReachBottom");
if (this.limit.pageNum >= this.pages) {
this.status = "nomore";
return;
}
this.status = "loading";
this.limit.pageNum = ++this.limit.pageNum;
await this.init();
},
methods:
init() {
const q = {
...this.limit,
};
queryAppointList(q).then(
(res) => {
if (res && res.data) {
this.pages = res.data.pages;
this.list = this.list.concat(res.data.records);
if (this.limit.pageNum >= this.pages) this.status = "nomore";
else this.status = "loading";
console.log(this.status, "状态");
}
},
() => {}
);
},