更多详细内容请进入 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>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐