下拉刷新

下拉刷新

uni-app x  基于  list-view 或 scroll-view 来实现下拉刷新，我们为大家封装了 ux-refresh-box 组件，来帮助开发者快速实现刷新整个过程的动画效果。具体操作请参考下面的演示源码。

ListView 说明

在 App 中，基于 recycle-view 的 list，才能实现长列表的资源自动回收，以保障列表加载很多项目时，屏幕外的资源被有效回收。
list-view 就是基于 recycle-view 的 list 组件。

运行图示

下拉刷新实现流程

1 使用 list-view 或 scroll-view 作为核心布局组件。
2 监听 list-view 或 scroll-view 的刷新事件 @refresherpulling 和 @refresherrefresh。
3 通过上面的事件调整刷新状态组件的状态，展示对应状态的提示内容。
4 触发下拉刷新事件时加载数据。
5 加载完成后调整并重置 刷新状态组件的状态（ 过程通过状态来实现 防抖 ）。

演示代码

<template>
	<!-- #ifdef APP -->
	<list-view
	class="scroll-view ux-flex1" 
	:scroll-y="true" 
	:rebound="false" 
	:refresher-enabled="true" 
	:refresher-threshold="refresherThreshold" 
	:refresher-triggered="refresherTriggered" 
	refresher-default-style="none" 
	@refresherpulling="onRefresherpulling" 
	@refresherrefresh="onRefresherrefresh">
		<list-item 
		v-for="i in dataList" 
		class="content-item">
			<text 
			class="demo ux-text-center ux-color-grey3 ux-text-small ux-bg-grey6">item-{{i}}</text>
		</list-item>
		<list-item slot="refresher">
			<ux-refresh-box
			:status="status"></ux-refresh-box>
		</list-item>
	</list-view>
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<scroll-view 
	class="scroll-view ux-flex1" 
	:scroll-y="true" 
	:rebound="false" 
	:refresher-enabled="true" 
	:refresher-threshold="refresherThreshold" 
	:refresher-triggered="refresherTriggered" 
	refresher-default-style="none" 
	@refresherpulling="onRefresherpulling" 
	@refresherrefresh="onRefresherrefresh" 
	@refresherabort="onRefresherabort">
		<view slot="refresher">
			<ux-refresh-box 
			:status="status"></ux-refresh-box>
		</view>
		<view 
		v-for="i in dataList" 
		class="content-item">
			<text 
			class="demo ux-text-center ux-color-grey3 ux-text-small ux-bg-grey6">item-{{i}}</text>
		</view>
	</scroll-view>
	<!-- #endif -->
</template>
<script lang="uts">
export default {
	data() {
		return {
			pullingDistance : 0.0,
			refresherTriggered : false,
			status : 0,
			refresherThreshold:40,
			dataList : [] as number[]
		}
	},
	mounted:function(){
		this.getData(false);
	},
	methods: {
		onRefresherabort : function(){
			this.status = 0;
		},
		onRefresherpulling : function(e:RefresherEvent){
			// 判断状态实现节流
			if(this.status > 2){
				return ;
			}
			if(e.detail.dy > this.refresherThreshold){
				this.status = 2;
			}else{
				this.status = 1;
			}
		},
		onRefresherrefresh:function(){
			// 判断状态实现节流
			if(this.status > 2){
				return ;
			}
			this.refresherTriggered = true;
			this.status = 3;
			this.getData(true);
		},
		// 模拟数据加载请求
		getData : function(isRefresh:boolean){
			// 此处实际开发中
			// 可以为一次 api 数据请求
			setTimeout(()=>{
				this.dataList = new Array<number>(1,2,3,4,5,6,7,8,9,10);
				if(isRefresh){
					this.status = 4;
					// 请求结束后恢复 loading
					setTimeout(()=>{
						this.refresherTriggered = false;
					}, 1500);
					setTimeout(()=>{
						this.status = 0;
					}, 2000);
				}
			}, 500);
		}
	}
}
</script>
<style scoped>
.demo{margin:30rpx; padding:80rpx;}
</style>