uni-app 下拉刷新

官方文檔

https://uniapp.dcloud.io/api/ui/pulldown

onPullDownRefresh

https://uniapp.dcloud.io/api/ui/pulldown?id=onpulldownrefresh

在 js 中定義 onPullDownRefresh 處理函數（和onLoad等生命周期函數同級），監聽該頁面用戶下拉刷新事件。

• 需要在 pages.json 里，找到的當前頁面的pages節點，並在 style 選項中開啟 enablePullDownRefresh。
• 當處理完數據刷新后，uni.stopPullDownRefresh 可以停止當前頁面的下拉刷新。

注意：開啟下拉刷新配置可以在全局配置打開也可以在頁面配置打開，但是一般不推薦全局配置打開，推薦那個頁面需要就在那個頁面打開

uni.startPullDownRefresh(OBJECT)

https://uniapp.dcloud.io/api/ui/pulldown?id=startpulldownrefresh

開始下拉刷新，調用后觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。

OBJECT 參數說明

參數名	類型	必填	說明
success	Function	否	接口調用成功的回調
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

success 返回參數說明

參數	類型	說明
errMsg	String	接口調用結果

uni.stopPullDownRefresh

https://uniapp.dcloud.io/api/ui/pulldown?id=stoppulldownrefresh

停止當前頁面下拉刷新。

使用示例

關閉全局下拉配置

創建頁面

如創建 pages/list/list.vue,內容如下

<template>
	<view>
		<view>這是列表頁</view>
		<view class="box-item" v-for="item in list">
			{{item}}
		</view>
		<button @click="pullDown">下拉刷新</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['前端','php','UI','測試','大數據','前端','php','UI','測試','大數據']
			}
		},
		onPullDownRefresh () {
			console.log('觸發了下拉刷新')
			setTimeout(()=>{
				this.list = ['php','UI','前端','測試','大數據']
				//手動關閉刷新
				uni.stopPullDownRefresh()
			},2000)
		},
		
		methods: {
			//點擊刷新
			pullDown() {
				uni.startPullDownRefresh()
			},
		}
	}
</script>

<style>
</style>

添加頁面配置並開啟下拉刷新

添加到pages.json中的pages節點中

{
	"path":"pages/list/list",
    "style": {
    	"enablePullDownRefresh": true
    }
},

效果

最開始的狀態

鼠標下拉刷新， 手動刷新也是一樣的