uniapp - 页面下拉刷新的两种方式

更多详细内容请进入 uniapp 官网查看： https://uniapp.dcloud.io/api/ui/pulldown?id=onpulldownrefresh

第一种方式：onPullDownRefresh 生命周期钩子

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

1. 需要在 pages.json 里，找到的当前页面的 pages 节点，并在 style 选项中开启 enablePullDownRefresh。
   

2. 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

   <template>
   	<view>
   		<view v-for="(item,index) of list" :key="index">
   			{{item}}
   		</view>
   	</view>
   </template>
   
   <script>
   	export default {
   		data() {
   			return {
   				list: [1, 2, 3, 4, 5]
   			}
   		},
   		methods: {},
   		onPullDownRefresh() {
   			console.log("触发下拉刷新")
   			setTimeout(() => {
   				this.list = [1, 2, 3, 5, 3, 2]
   				//关闭下拉刷新
   				uni.stopPullDownRefresh()
   			},2000)
   		}
   	}
   </script>
   
   <style>
   </style>
   

第二种方式：uni.startPullDownRefresh(OBJECT)

通过 uni.startPullDownRefresh(OBJECT) 开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

<template>
	<view>
		<view v-for="(item,index) of list" :key="index">
			{{item}}
		</view>
		<button @click="pullDown">点击触发下拉刷新</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [1, 2, 3, 4, 5]
			}
		},
		methods: {
			pullDown() {
				//触发下拉刷新
				uni.startPullDownRefresh()
			}
		},
		onPullDownRefresh() {
			console.log("触发下拉刷新")
			setTimeout(() => {
				this.list = [1, 2, 3, 5, 3, 2]
				//关闭下拉刷新
				uni.stopPullDownRefresh()
			}, 2000)
		}
	}
</script>

<style>
</style>