提到微信小程序的下拉刷新,我们可能首先会想到<scroll-view>中的下拉刷新事件,显而易见这样只满足在<scroll-view>组件。先在我们来看一下onPullDownRefresh下拉刷新功能。详解请见uni-app官网。
1、onPullDownRefresh
在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。
- 需要在
pages.json
里,找到的当前页面的pages节点,并在style
选项中开启enablePullDownRefresh
。- 当处理完数据刷新后,
uni.stopPullDownRefresh
可以停止当前页面的下拉刷新。
2、uni.startPullDownRefresh(OBJECT)
开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
3、uni.stopPullDownRefresh()
停止当前页面下拉刷新。
示例:
pages.json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#0faeff",
"backgroundColor": "#fbf9fe"
}
}
index.vue
// 仅做示例,实际开发中延时根据需求来使用。
export default {
data() {
return {
text: 'uni-app'
}
},
onLoad: function (options) {
setTimeout(function () {
console.log('start pulldown');
}, 1000);
uni.startPullDownRefresh();
},
onPullDownRefresh() {
console.log('refresh');
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
}
}
我再开发中的使用:
onLoad() {
this.goodsList = [];
const page = {
curPage: 1,
pageSize: 10
}
this.page = page;
uni.startPullDownRefresh();
this.getGoodsList(page);
this.getSwiper();
},
// 下拉刷新
onPullDownRefresh() {
this.goodsList = [];
const page = {
curPage: 1,
pageSize: 10
}
this.page = page;
this.getGoodsList(page);
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1500);
},