小程序分页加载

简易版的数据分页加载,滚动加载下一页

初始数据:

data: {
page: 1, // 第几页
hasMoreData: true, // 下一页是否还有新数据(默认有下一页数据)
dataList: [] // 数据列表
}

如果接口会返回类似标志字段这里就不用自己定义了。

新页加载事件:

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if(!this.data.hasMoreData) {
return;
}
this.data.page ++;
wx.showLoading({
title: '',
mask: true
})
this.getDataList();
}

如果还有新数据,将页数加一,请求接口获取下一页数据,否则返回。

请求接口

// 获取数据列表
getDataList() {
if (!this.data.hasMoreData) {
return;
}
const params = {
id: this.options.id,
page: this.data.page
}
return app.$api.getDataList(params).then(res => {
if (res.status == 1) {
let resData = res.data || [];
if (!resData.length) {
this.setData({
hasMoreData: false
})
}
resData = this.data.complainList.concat(resData);
this.setData({
dataList: resData
})
wx.hideLoading();
}
})
}

将当前数据列表与新的返回数据进行连接操作,渲染新列表。如果没有新数据将
hasMoreData设置为false,避免下拉到底一直请求接口。

有tab切换时要重置数据

posted @   Li_pk  阅读(207)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程
点击右上角即可分享
微信分享提示