uniapp 局部下拉刷新实现使用scroll-view

最新推荐文章于 2024-08-22 11:53:20 发布

^草莓牛乳茶^

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量508

点赞数

分类专栏： uni-app 文章标签： uni-app html css

本文链接：https://blog.csdn.net/2301_76882889/article/details/130411494

版权

uni-app 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、template中，scroll包裹住内容

<scroll-view
 style="height: 300px;" 
 scroll-y="true"
 refresher-enabled="true"
 :refresher-triggered="triggered"
 :refresher-threshold="100" 
 refresher-background="#FFF"
 @refresherpulling="onPulling"
 @refresherrefresh="onRefresh"
 @refresherrestore="onRestore"
 @refresherabort="onAbort">
//  刷新内容
 <view v-for="(item,index) in items" :key="index" style="margin-top: 30rpx;">
	<view class="flex-between-center">
		<view class="icon_left icon_left2">{{index+1}}</view>
		<view class="flex-between-center icon_right icon_right2">
		  <view class="icon_text2" style="width: 27%;">{{item.name}}</view>
		  <view class="icon_text2">{{item.idNum}}</view>
		  <view class="icon_text2" @click="deletPeople(item)">
				<u-icon name="close-circle" color="#FF3636" size="23"></u-icon>
		  </view>
		  <view class="icon_text2" @click="copy(item)">
				<u-icon name="file-text" size="23"></u-icon>
		  </view>
	</view>
 </view>
</scroll-view>

2、data中定义

triggered: false,

3、methods中

		onPulling(e) {
				this._freshing = false;
				setTimeout(() => {
					this.triggered = true;
				}, 1000)
				console.log("onpulling", e);
				this.viewPeople()
				this.triggered = true;
				//调接口，等接口回来之后，关闭 this.triggered = true;
				console.log("下拉刷新了")
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 1000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},

原文链接：uniapp 实现局部下拉刷新_uniapp局部下拉刷新_CV_CodeMan的博客-CSDN博客