This page is translated by Google Cloud Translation API

Switch to Chinese

onPullDownRefresh

Define the onPullDownRefresh processing function (at the same level as the lifecycle functions such as onLoad) in js to listen to the user's pull-down refresh event of this page.

• You need to find the pages node of the current page in pages.json and enable enablePullDownRefresh in the style option.
• When the data refresh is finished, uni.stopPullDownRefresh can stop the pull-down refresh of the current page.

uni.startPullDownRefresh(OBJECT)

Start pull-down refresh which triggers the pull-down refresh animation after calling, and the effect is consistent with user's manual pull-down refresh.

OBJECT parameter description

Parameter name	Type	Required	Instruction
success	Function	No	Callback for successful interface calling
fail	Function	No	Callback function for failed interface calling
complete	Function	No	Callback function for closed interface calling (available both for successful and failed calling)

success return parameter description

Parameter	Type	Instruction
errMsg	String	Interface call result

uni.stopPullDownRefresh()

Stop the current page pull-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

// Only for example, the delay is used as required in actual development.
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);
	}
}

Notice

• The Alipay applet startPullDownRefresh will prompt in the developer tool not yet open, please do not use
• Alipay applet startPullDownRefresh please use real machine to debug (not real machine preview)
• Subsequent updates of Alipay applet development tools may be modified

FAQ

Q: How to temporarily disable the pull-down refresh and turn it on when needed? A: App This type of scenario can be handled on the platform. For details, please refer to Dynamic disable/enable pull-down refresh in uni-app

Q: How to place pull-down refresh under title with custom title A: The App and H5 sides use the circle method to pull down to refresh, and set the offset below the title height. Template for hello uni-app - there are examples in the navigation bar. The applet cannot be implemented unless the native pull-down refresh is abandoned and the pull-down refresh is simulated by yourself. There are similar plug-ins in the plug-in market, but the performance is not as good as the native pull-down refresh.

Q: How to customize the pull-down refresh style A: The native pull-down refresh style on the applet side is fixed; the native pull-down refresh style on the app side has two styles to choose from, pull-down snowflakes and pull-down circles. If you use nvue, you can use refresh component to customize the pull-down refresh, all of which are native rendering. If you want to use scroll-view to implement custom pull-down refresh on the front end, you need to pay attention that the list should not be too long and complicated, otherwise there will be performance problems. Plugin Market There is an example to search for pull-down refresh.