这里我就不写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})}}})},