Wechat applet pull-down refresh function --onpulldownrefresh

Mentioned the pull-down refresh of wechat applet , We may think of <scroll-view> Pull down refresh event in , Obviously, this is only satisfied with <scroll-view> Components . Let's have a look first onPullDownRefresh Pull down refresh function . For details, see uni-app Official website .

onPullDownRefresh

stay js In the definition of onPullDownRefresh Processing function （ and onLoad And so on ）, Listen for the user pull-down refresh event on this page .

• Need to be in  pages.json  in , Of the current page found pages node , And in  style  Option on  enablePullDownRefresh.
• When the data is refreshed after processing ,uni.stopPullDownRefresh  You can stop the pull-down refresh of the current page .

uni.startPullDownRefresh(OBJECT)

  Start pull-down refresh , Trigger the pull-down to refresh the animation after calling , The effect is the same as the user's manual pull-down refresh .

uni.stopPullDownRefresh()

  Stop the current page drop-down refresh .

Example ：

 pages.json

{
    "pages": [
        {
        	"path": "pages/index/index",
        	"style": {
        		"navigationBarTitleText": "uni-app",
        		"enablePullDownRefresh": true
        	}
        }
    ],
    "globalStyle": {
    	"navigationBarTextStyle": "white",
    	"navigationBarBackgroundColor": "#0faeff",
    	"backgroundColor": "#fbf9fe"
    }
}

 index.vue

//  Just for example , In the actual development, the delay is used according to the demand .
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);
	}
}

  My use in redevelopment ：

onLoad() {
	this.goodsList = [];
	const page = {
		curPage: 1,
		pageSize: 10
	}
	this.page = page;
	uni.startPullDownRefresh();
	this.getGoodsList(page);
	this.getSwiper();
},
//  The drop-down refresh 
onPullDownRefresh() {
	this.goodsList = [];
	const page = {
		curPage: 1,
		pageSize: 10
	}
	this.page = page;
	this.getGoodsList(page);
	setTimeout(function () {
		uni.stopPullDownRefresh();
	}, 1500);
},