微信小程序加载更多
warning:
这篇文章距离上次修改已过208天,其中的内容可能已经有所变动。
背景:
博客小程序开发,涉及博客列表加载更多需求。
前提:
接口:https://ytyzhn.top/api/xx?pageSize=xx&page=xx
view代码
<view class="container"> <view wx:for="{{items}}" wx:key="id"> <text>{{item.cid}}--{{item.title}}</text> </view> <view class="pagination"> <button bindtap="loadMore" disabled="{{noMoreData}}">加载更多</button> </view> </view>
CSS代码
.container { padding: 20rpx; } .pagination button { margin-top: 20rpx; }
js代码
Page({ data: { items: [], // 存储分页数据的数组 page: 0, // 当前页码 pageSize: 10, // 每页大小 noMoreData: false // 是否没有更多数据 }, onLoad: function () { this.loadData(); }, // 加载数据 loadData: function() { const that = this; var page = that.data.page + 1 ; var pageSize=that.data.pageSize; this.setData({ page }) wx.request({ url: 'https://abc.com/api/xx&pageSize=' + pageSize + '&page=' + page, // 替换为你的服务器地址 method: 'GET', success: function(res) { var mydata = res.data; if(mydata.status === 200){ const newData = that.data.items.concat(res.data.data); // 合并新数据到旧数据 that.setData({ items: newData, currentPage: res.data.currentPage, noMoreData: res.data.data.length < that.data.pageSize // 如果没有返回足够的数据,则没有更多数据 }); }else { // 处理错误 wx.showToast({ title: '获取数据失败', icon: 'none' }); } }, fail: function(err) { console.error(err); } }); }, // 加载更多数据 loadMore: function() { // console.log(this.data.noMoreData) if (!this.data.noMoreData) { this.setData({ currentPage: this.data.currentPage + 1 }); this.loadData(); } } });
效果验证
更多支撑
请关注微信公众号:“yuan与张”