From bf086080e1d97f9653b6e3bdb780c0571fef0358 Mon Sep 17 00:00:00 2001
From: shutao-dc <shutao@dcloud.io>
Date: Thu, 7 Sep 2023 15:57:54 +0800
Subject: [PATCH] Update scroll-view-refresher-props.uvue

---
 .../scroll-view-refresher-props.uvue          | 339 +++++++++---------
 1 file changed, 172 insertions(+), 167 deletions(-)

diff --git a/pages/component/scroll-view/scroll-view-refresher-props.uvue b/pages/component/scroll-view/scroll-view-refresher-props.uvue
index d056d5f9..90e57885 100644
--- a/pages/component/scroll-view/scroll-view-refresher-props.uvue
+++ b/pages/component/scroll-view/scroll-view-refresher-props.uvue
@@ -1,167 +1,172 @@
-<template>
-	<!-- #ifdef APP -->
-	<view style="flex:1;">
-		<!-- #endif -->
-		<page-head title="下拉刷新的scroll-view属性示例"></page-head>
-		<view class="uni-margin-wrap">
-			<scroll-view :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
-				:refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
-				:refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
-				@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
-				@refresherabort="refresherabort">
-				<view class="item" :id="item.id" v-for="(item,_) in items">
-					<text class="uni-text">{{item.label}}</text>
-				</view>
-			</scroll-view>
-		</view>
-
-		<scroll-view class="uni-list" showScrollbar="true">
-			<view class="uni-common-pb"></view>
-			<text style="font-size: 12;text-align: center;color: red; ">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
-			<view class="uni-common-pb"></view>
-			<view class="uni-option">
-				<text>是否开启下拉刷新</text>
-				<switch :checked="refresherEnabled" @change="handleTrunOnRefresher"></switch>
-			</view>
-			<view class="uni-option">
-				<text>设置下拉刷新状态</text>
-				<switch :disabled="!refresherEnabled" :checked="refresherTriggered"
-					@change="refresherTriggered=!refresherTriggered"></switch>
-			</view>
-
-			<view class="uni-option">
-				<text>设置下拉刷新阈值</text>
-				<input style="width: 100rpx;border-width: 2rpx;text-align: center; " :disabled="!refresherEnabled"
-					:value="refresherThreshold" type="number" @input="handleRefresherThresholdInput" />
-			</view>
-
-			<view class="uni-option">
-				<text>设置下拉刷新区域背景颜色</text>
-				<input style="width: 200rpx;border-width: 2rpx;text-align: center; " :disabled="!refresherEnabled"
-					:value="refresherBackground" @input="handleRefresherBackground" />
-			</view>
-
-			<view style="height: 200rpx;padding: 20rpx; ">
-				<text>设置下拉刷新默认样式</text>
-				<view class="uni-common-pb"></view>
-				<view style="flex-direction: row;">
-					<button style="padding: 5rpx; margin-right: 10rpx;" type="primary" size="mini"
-						@click="refresherDefaultStyle = `none`">none</button>
-					<button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
-						@click="refresherDefaultStyle = `black`">black</button>
-					<button style="padding: 5rpx;" type="primary" size="mini"
-						@click="refresherDefaultStyle = `white`">white</button>
-				</view>
-			</view>
-
-			<!-- //todo 还有自定义下拉刷新样式的例子 -->
-			<view class="uni-common-pb"></view>
-		</scroll-view>
-
-	</view>
-</template>
-
-<script>
-	type Item = {
-		id : string,
-		label : string,
-	}
-	export default {
-		data() {
-			return {
-				items: [] as Item[],
-				refresherEnabled: false,
-				refresherTriggered: false,
-				refresherThreshold: 45,
-				refresherDefaultStyle: "white",
-				refresherBackground: "transparent",
-			}
-		},
-		onLoad() {
-			for (let i = 0; i < 10; i++) {
-				const item = {
-					id: "item" + i,
-					label: "item" + i,
-				} as Item;
-				this.items.push(item);
-			}
-		},
-		methods: {
-			handleTrunOnRefresher() {
-				this.refresherTriggered = false;
-				//不能同时关闭下拉状态和关闭下拉刷新。
-				setTimeout(() => {
-					this.refresherEnabled = !this.refresherEnabled;
-				}, 0)
-			},
-			handleRefresherThresholdInput(e : InputEvent) {
-				const value = e.detail.value;
-				if (value == "") {
-					this.refresherThreshold = 45;
-				} else {
-					this.refresherThreshold = parseInt(e.detail.value);
-				}
-			},
-
-			handleRefresherBackground(e : InputEvent) {
-				const value = e.detail.value;
-				this.refresherBackground = value;
-			},
-			//响应事件
-			refresherpulling() {
-				console.log("下拉刷新控件被下拉");
-			},
-			refresherrefresh() {
-				console.log("下拉刷新被触发");
-			},
-			refresherrestore() {
-				console.log("下拉刷新被复位");
-			},
-			refresherabort() {
-				console.log("下拉刷新被中止");
-			}
-		}
-	}
-</script>
-
-<style>
-	.uni-margin-wrap {
-		height: 400rpx;
-		margin-left: 50rpx;
-		margin-right: 50rpx;
-	}
-
-	.item {
-		justify-content: center;
-		align-items: center;
-		height: 400rpx;
-		width: 100%;
-		background-color: azure;
-		border-width: 2rpx;
-		border-color: chocolate;
-	}
-
-	.uni-text {
-		color: black;
-		font-size: 50px;
-	}
-
-	.uni-list {
-		flex: 1;
-		margin: 50rpx 50rpx 0rpx 50rpx;
-	}
-
-	.uni-option {
-		height: 100rpx;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-		padding: 20rpx;
-	}
-
-	.picker-view {
-		width: 100%;
-		height: 320px;
-		margin-top: 10px;
-	}
-</style>
\ No newline at end of file
+<template>
+	<!-- #ifdef APP -->
+	<view style="flex:1;">
+		<!-- #endif -->
+		<page-head title="下拉刷新的scroll-view属性示例"></page-head>
+		<view class="uni-margin-wrap">
+			<scroll-view :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
+				:refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
+				:refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
+				@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
+				@refresherabort="refresherabort">
+				<view class="item" :id="item.id" v-for="(item,_) in items">
+					<text class="uni-text">{{item.label}}</text>
+				</view>
+			</scroll-view>
+		</view>
+
+		<scroll-view class="uni-list" showScrollbar="true">
+			<view class="uni-common-pb"></view>
+			<text style="font-size: 12;text-align: center;color: red; ">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
+			<view class="uni-common-pb"></view>
+			<view class="uni-option">
+				<text>是否开启下拉刷新</text>
+				<switch :checked="refresherEnabled" @change="handleTrunOnRefresher"></switch>
+			</view>
+			<view class="uni-option">
+				<text>设置下拉刷新状态</text>
+				<switch :disabled="!refresherEnabled" :checked="refresherTriggered"
+					@change="refresherTriggered=!refresherTriggered"></switch>
+			</view>
+
+			<view class="uni-option">
+				<text>设置下拉刷新阈值</text>
+				<input style="width: 100rpx;border-width: 2rpx;text-align: center; " :disabled="!refresherEnabled"
+					:value="refresherThreshold" type="number" @input="handleRefresherThresholdInput" />
+			</view>
+
+			<view class="uni-option">
+				<text>设置下拉刷新区域背景颜色</text>
+				<input style="width: 200rpx;border-width: 2rpx;text-align: center; " :disabled="!refresherEnabled"
+					:value="refresherBackground" @input="handleRefresherBackground" />
+			</view>
+
+			<view style="height: 200rpx;padding: 20rpx; ">
+				<text>设置下拉刷新默认样式</text>
+				<view class="uni-common-pb"></view>
+				<view style="flex-direction: row;">
+					<button style="padding: 5rpx; margin-right: 10rpx;" type="primary" size="mini"
+						@click="refresherDefaultStyle = `none`">none</button>
+					<button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
+						@click="refresherDefaultStyle = `black`">black</button>
+					<button style="padding: 5rpx;" type="primary" size="mini"
+						@click="refresherDefaultStyle = `white`">white</button>
+				</view>
+			</view>
+
+			<!-- //todo 还有自定义下拉刷新样式的例子 -->
+			<view class="uni-common-pb"></view>
+		</scroll-view>
+
+	</view>
+</template>
+
+<script>
+	type Item = {
+		id : string,
+		label : string,
+	}
+	export default {
+		data() {
+			return {
+				items: [] as Item[],
+				refresherEnabled: false,
+				refresherTriggered: false,
+				refresherThreshold: 45,
+				refresherDefaultStyle: "white",
+				refresherBackground: "transparent",
+			}
+		},
+		onLoad() {
+			for (let i = 0; i < 10; i++) {
+				const item = {
+					id: "item" + i,
+					label: "item" + i,
+				} as Item;
+				this.items.push(item);
+			}
+		},
+		methods: {
+			handleTrunOnRefresher() {
+				this.refresherTriggered = false;
+				//不能同时关闭下拉状态和关闭下拉刷新。
+				setTimeout(() => {
+					this.refresherEnabled = !this.refresherEnabled;
+				}, 0)
+			},
+			handleRefresherThresholdInput(e : InputEvent) {
+				const value = e.detail.value;
+				if (value == "") {
+					this.refresherThreshold = 45;
+				} else {
+					this.refresherThreshold = parseInt(e.detail.value);
+				}
+			},
+
+			handleRefresherBackground(e : InputEvent) {
+				const value = e.detail.value;
+				this.refresherBackground = value;
+			},
+			//响应事件
+			refresherpulling() {
+				console.log("下拉刷新控件被下拉");
+			},
+			refresherrefresh() {
+				console.log("下拉刷新被触发");
+				this.refresherTriggered = true;
+		        //不能同时关闭下拉状态和关闭下拉刷新。
+		        setTimeout(() => {
+		        	this.refresherTriggered = false;
+		        }, 1500)
+			},
+			refresherrestore() {
+				console.log("下拉刷新被复位");
+			},
+			refresherabort() {
+				console.log("下拉刷新被中止");
+			}
+		}
+	}
+</script>
+
+<style>
+	.uni-margin-wrap {
+		height: 400rpx;
+		margin-left: 50rpx;
+		margin-right: 50rpx;
+	}
+
+	.item {
+		justify-content: center;
+		align-items: center;
+		height: 400rpx;
+		width: 100%;
+		background-color: azure;
+		border-width: 2rpx;
+		border-color: chocolate;
+	}
+
+	.uni-text {
+		color: black;
+		font-size: 50px;
+	}
+
+	.uni-list {
+		flex: 1;
+		margin: 50rpx 50rpx 0rpx 50rpx;
+	}
+
+	.uni-option {
+		height: 100rpx;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx;
+	}
+
+	.picker-view {
+		width: 100%;
+		height: 320px;
+		margin-top: 10px;
+	}
+</style>
-- 
GitLab