我们在运用uni-app开发小程序或h5时,常常需要页面实现下拉刷新功能。
在 js 中定义 onPullDownRefresh
处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。
步骤:
1、需要在pages.json
里,找到的当前页面的pages节点,并在 style 选项中开启enablePullDownRefresh
。
2、当处理完数据刷新后,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: {
text: 'uni-app'
},
onShow: function (options) {
this.loadData();
},
onPullDownRefresh() {
this.loadData()
}
methods:{
loadData() {
this.$http('/data', {}, 'get').then((res) => {
//数据请求完成之后停止下拉刷新
uni.stopPullDownRefresh();
if (res.status) {
this.activityList = res.data
}
})
}
}
}