微信小程序下拉刷新功能--onPullDownRefresh

提到微信小程序的下拉刷新，我们可能首先会想到中的下拉刷新事件，显而易见这样只满足在组件。先在我们来看一下onPullDownRefresh下拉刷新功能。详解请见uni-app官网。

onPullDownRefresh

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

 

uni.startPullDownRefresh(OBJECT)

 开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

 

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);
},