这里我就不写wxml了,就是一个列表循环,直接看js代码逻辑,注释都写在代码后面了,这个方法可以实现无限滚动加载,直到加载完最后一条数据,也可以实现触底没数据后,二次触底可以从新加载刷新,学废了就给个三联把,感谢!
data: {
orderList: [],
pageSize: 10,
pageNum: 1,
},
/**
* 上拉触底 onReachBottom微信自带的触底函数
*/
onReachBottom: function () {
if (this.data.pageNum * this.data.pageSize == this.data.orderList.length) {
// 数据列表的数量刚好等于页数*每页条数,可以请求下一页
this.setData({
pageNum: this.data.pageNum + 1, // 一般上拉触底是为了加载更多分页数据,所以这里页数自增
});
this.getorderList() // 查询列表方法
} else {
// 数据列表的数量不等于页数*每页条数,说明当前页数据不足10条,已经没有更多数据了
this.setData({
noMor: true // 这里在页面最底部显示一排文字,没有更多数据了
})
}
},
// 获取列表数据方法
getorderList() {
app.http.getOrder({
pageNum: this.data.pageNum,
pageSize: this.data.pageSize
}).then(res => {
if (res.data.length == 0) { //请求的数据为空,没有数据
if (this.data.pageNum == 1) { // 第一页都没有数据,直接显示暂无数据
this.setData({
noData: true,
})
} else { // 不为第一页时,请求的数据为空,说明没有更多数据了,把pageNum减一,是为了下次触底可以继续请求刷新,万一有了新数据也可以正常显示出来
this.setData({
noMor: true,
pageNum: this.data.pageNum - 1
})
}
} else { // 请求的结果有数据额
if (res.data.length == this.data.pageSize) { // 请求的数据为10条,说明下一页可能还有数据,列表添加上新的数据,把其他状态设为不显示
this.setData({
orderList: [...this.data.orderList, ...res.data],
noMor: false,
noData: false
})
} else { // 请求的数据没有10条,说明下一页已经暂时没有数据了,列表添加上新的数据,底部显示暂无更多数据
this.setData({
orderList: [...this.data.orderList, ...res.data],
noMor: true,
noData: false
})
}
}
})},
感谢分享
这不能无限加载吧,当数据量过大时候(比如2w+条),占用内存过大,小程序会崩掉
报错了,app is not defined