小程序中想要实现下拉刷新还是很方便的,官方文档给了API。但是如何使用并没有找到详细用法,有事找度娘,在这里记录下。
想要实现下拉刷新或上拉加载,首先最重要的一点就是设置app.json或者某页面.json、将enablePullDownRefresh 这个属性设置为true。
app.json和某页面.json的区别:
app.json:是全局型的下拉刷新
某页面.json :是单个页面的下拉刷新
设置完之后,就是监听下拉刷新或者上拉加载了
下拉刷新:onPullDownRefresh(){ }
在js里:
这里先模拟加载,添加了一个定时器
效果图:
注:默认刷新动画的背景颜色是白色,所以会看不到下面的三点。加一个背景颜色就好了。
//下拉刷新
onPullDownRefresh() {
console.log('--------下拉刷新-------')
wx.showNavigationBarLoading() //在标题栏中显示加载
wx.showLoading({
title: '努力加载中',
})
//模拟加载
setTimeout(function () {
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
//隐藏加载框
wx.hideLoading();
}, 1500);
},
上拉加载:onReachBottom(){ }
。。。