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

蔚落 2021-07-25 14:27 1623阅读 0赞

### 页面下拉刷新的两种方式 ###

*  第一种方式：onPullDownRefresh 生命周期钩子
 *  第二种方式：uni.startPullDownRefresh(OBJECT)

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

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

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

1.  需要在 `pages.json` 里，找到的当前页面的 pages 节点，并在 style 选项中开启 `enablePullDownRefresh`。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]
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>

[https_uniapp.dcloud.io_api_ui_pulldown_id_onpulldownrefresh]: https://uniapp.dcloud.io/api/ui/pulldown?id=onpulldownrefresh
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/75f7b8425b084f6faf639b0ee0b10a8c.png