小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式
onPullDownRefresh() //用户下拉刷新事件,onReachBottom() //用户上拉触底事件
onPullDownRefresh和onReachBottom是小程序的页面事件,官方文档描述”需要在app.json
的window
选项中或页面的json文件中开启enablePullDownRefresh
“,个人觉得还是在页面配置较好,毕竟不是每个页面都需要上拉刷新事件,
//json配置
{
"usingComponents": {},
"backgroundTextStyle":"dark",//dark:显示刷新动画
"enablePullDownRefresh":true,//允许下拉刷新
"onReachBottomDistance":50//距离底部多少px时触发上拉加载事件
}
使用方法
官方文档:”可以通过wx.startPullDownRefresh
触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致“,
意思是既可以通过用户滑动触发,也可以通过wx.startPullDownRefresh()
调用的方式执行onPullDownRefresh()方法,代码如下
onShow() {
setTimeout(()=>{
//方法调用的方式触发下拉刷新事件
wx.startPullDownRefresh()
},1000)
},
/**
* 下滑刷新事件
*/
onPullDownRefresh() {
//做些什么...
wx.stopPullDownRefresh()//得到结果后关掉刷新动画 },
上拉加载事件需要用户滑动,当距离页面底部的值到onReachBottomDistance的设置参数时,便会触发,代码如下
/**
* 上拉加载
*/
onReachBottom(){
//做些什么
......
},
最后看一个整体的代码
onShow() {
setTimeout(()=>{
wx.startPullDownRefresh()//通过方法调用刷新
},1000)
},
/**
* 下滑刷新事件
*/
onPullDownRefresh() {
wx.stopPullDownRefresh()//结束刷新 },
/**
* 上拉加载
*/
onReachBottom(){
//触发了上拉加载,做些什么
},