enablePullDownRefresh 是微信小程序页面配置的一个参数,用于开启页面的下拉刷新功能。
当 enablePullDownRefresh 参数值设置为 true,则用户在下拉页面时,会显示下拉刷新的动画,并触发页面的 onPullDownRefresh 事件。开启下拉刷新功能后,开发者可以在 onPullDownRefresh 事件中编写数据刷新的逻辑代码,实现数据的重新加载和页面内容的更新。
在具体实现时,需要在小程序页面的 json 配置文件中设置 enablePullDownRefresh: true,并在对应页面的 js 文件中编写 onPullDownRefresh 事件的处理函数。
下面是开启页面下拉刷新功能的具体步骤:
- 在
app.json或page.json中设置enablePullDownRefresh: true:
{
"enablePullDownRefresh": true
}
- 在页面的
.js中定义下拉刷新的回调函数:
Page({
onPullDownRefresh() {
// TODO: 下拉刷新的回调函数
}
})
- 在下拉刷新回调函数中,编写业务逻辑代码来重新加载页面内容或数据。
- 当下拉刷新完成后,需要调用
wx.stopPullDonwnRefresh()来停止下拉刷新动画。
下面是一个简单的示例代码,用于演示如何开启页面下拉刷新功能:
// page.json
{
"navigationBarTitleText": "下拉刷新示例页面",
"enablePullDownRefresh": true
}
// page.js
Page({
data: {
list: [1, 2, 3, 4, 5]
},
onPullDownRefresh() {
wx.showLoading({
title: '加载中',
mask: true
});
setTimeout(() => {
this.setData({
list: this.generateList()
});
wx.hideLoading();
wx.stopPullDownRefresh();
wx.showToast({
title: '刷新成功',
icon: 'success',
duration: 2000
});
}, 1000);
},
generateList() {
const list = [];
for (let i = 0; i < 5; i++) {
list.push(Math.round(Math.random() * 100));
}
return list;
}
})
在以上示例代码中,我们在 page.json 中设置了 enablePullDownRefresh: true 参数,开启了页面下拉刷新功能。在下拉刷新回调函数 onPullDownRefresh 中,我们使用 wx.showLoading() 显示加载中提示,模拟异步加载新数据的过程。在数据加载完成后,我们更新页面数据,并调用 wx.hideLoading()、wx.stopPullDownRefresh()、wx.showToast() 等 API,来停止下拉刷新、隐藏加载中提示,同时弹出刷新成功提示框。