uniapp使用onPullDownRefresh实现页面下拉刷新

作者: gavin 分类: uniapp 发布时间: 2022-02-11 10:28

这是在pages.json里 设置的全局下拉刷新效果 不推荐使用  一般用户都是刷新单个页面

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"enablePullDownRefresh":true   //实现全局下拉刷新效果

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

需要在 pages.json 里,找到的当前需要实现下拉效果页面的pages节点,并在 style 选项中开启 enablePullDownRefresh
当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
uni.stopPullDownRefresh()
停止当前页面下拉刷新。

"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "当前页面标题",
				"enablePullDownRefresh":true    //实现下拉刷新样式
			}
		}
<script>
	export default {
		data() {
			return {
				title: 'hello',
				list:['你好!','下拉','就可','刷新我']
			}
		},
		onPullDownRefresh(){
			//刷新后的效果
			this.list = ['你好!','我','已','刷新了']
			uni.stopPullDownRefresh()  //刷新数据之后停止刷新效果
		},
		onLoad() {
 
		},
		methods: {
 
		}
	}
</script>

数据较少的情况下 刷新效果可能比较快 这时可以加个延迟效果 如延迟2s

<script>
	export default {
		data() {
			return {
				title: 'hello',
				list:['你好!','下拉','就可','刷新我']
			}
		},
		onPullDownRefresh(){
			//this.list = ['你好!','我','已','刷新了']
 
			setTimeout(()=>{
				this.list = ['你好!','我','已','刷新了']
				uni.stopPullDownRefresh()
			},2000)
			
		},
		onLoad() {
 
		},
		methods: {
 
		}
	}
</script>

二 通过uni.startPullDownRefresh()方法

开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致

例 给button按钮做一个点击之后刷新效果

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<!-- v-for循环 把数据渲染出来 -->
		<view v-for="item in list">
			{{item}}
		</view>
		<button @click="pullDown">点我刷新</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'hello',
				list:['你好!','下拉','就可','刷新我']
			}
		},
		onPullDownRefresh(){
			//刷新后的效果
			//this.list = ['你好!','我','已','刷新了']
			setTimeout(()=>{
				this.list = ['你好!','我','已','刷新了']
				uni.stopPullDownRefresh()
			},2000)
			
		},
		onLoad() {
 
		},
		//方法
		methods: {
			pullDown(){
				uni.startPullDownRefresh();
			}
		}
	}
</script>