小程序实现列表下拉刷新上拉加载更多。本文主本介绍两个方法的使用,分别是:下拉刷新onPullDownRefresh,上拉加载更多onReachBottom,列表实现前面文章中已实现,请参考地址:https://www.jianshu.com/p/44b07a86c8ff。
实现方法:
1、在小程序app.json文件中,对应的window下添加代码:
"enablePullDownRefresh": true,
2、对小程序对应的.js文件中添加data:
data: {
pageNum: 1, // 设置加载的第几次,默认是第一次
isFirstLoad: true, // 用于判断List数组是不是空数组,默认true,空的数组
hasMore: false, // “加载更多”
}
3、对小程序中,添加 onPullDownRefresh 和 onReachBottom方法
// 下拉刷新
onPullDownRefresh: function () {
// 显示导航栏loading
wx.showNavigationBarLoading();
// 调用接口加载数据
//this.loadData();
// 隐藏导航栏loading
wx.hideNavigationBarLoading();
// 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新
wx.stopPullDownRefresh();
},
// 上拉加载
onReachBottom(e) {
let that = this;
if (that.data.hasMore) {
that.setData({
pageNum: that.data.pageNum + 1, // 每次触发上拉事件,把pageNum+1
isFirstLoad: false // 触发到上拉事件,把isFirstLoad设为为false
});
//that.loadData();
}
}
此项目主要介绍两个方法并结合导航栏loading显示正在加载的效果。