小程序分页加载
简易版的数据分页加载,滚动加载下一页
初始数据:
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切换时要重置数据
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于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保姆级教程