今天我们来分享一个微信小程序小应用。功能:实现数据默认10条,然后向下滑动每次加载10条数据。
废话不多说,我们直接开始吧。
功能主要有三个要点:
1、接口返回的页数
2、每页的条数
3、总数
我们可以看下DEMO,如下:
Page({
data: {
dataList: [], // 数据列表
pageNum: 1, // 当前页码
pageSize: 10, // 每页数据数量
isLoading: false, // 是否正在加载数据
hasMore: true // 是否还有更多数据
},
onLoad: function() {
this.loadData();
},
// 加载数据
loadData: function() {
if (this.data.isLoading || !this.data.hasMore) {
return;
}
this.setData({
isLoading: true
});
// 发起请求获取数据
wx.request({
url: '/path/to/api',
data: {
pageNum: this.data.pageNum,
pageSize: this.data.pageSize
},
success: res => {
// 处理返回的数据
const newDataList = res.data.dataList;
this.setData({
dataList: this.data.dataList.concat(newDataList),
pageNum: this.data.pageNum + 1,
hasMore: newDataList.length >= this.data.pageSize,
isLoading: false
});
},
fail: () => {
this.setData({
isLoading: false
});
}
});
},
// 刷新数据
refreshData: function() {
this.setData({
dataList: [],
pageNum: 1,
hasMore: true
});
this.loadData();
},
// 触底加载更多数据
loadMoreData: function() {
this.loadData();
}
});
当然,这个是需要组件的,我们可以用微信小程序默认的onPullDownRefresh函数和onReachBottom()函数代替上面的。