在微信小程序上实现下拉刷新、上拉加载的效果
使用系统提供的onPullDownRefresh、onReachBottom这2个事件,
前提需要在app.json或page.json配置文件中设置,才能使用。
app.json是全应用的页面都可以使用该事件,page.json则只是对应的页面才可以使用。
示例:
app.json:
在app.json文件里设置window属性
{
"window":{
"enablePullDownRefresh": true
}
}
page.json:
在page.json文件里直接设置属性
{
"enablePullDownRefresh": true
}
示例:
可以结合导航栏loading显示正在加载的效果
Page({
data: {
pageNum: 1,// 设置加载的第几次,默认是第一次
isFirstLoad: true,// 用于判断List数组是不是空数组,默认true,空的数组
hasMore: false,// “加载更多”
},// 下拉刷新
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();
}
},})
原文地址:https://blog.csdn.net/lwzhang1101
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。