Update scroll-view-refresher-props.uvue

bf086080 · shutao-dc · b594a3c6 · bf086080
隐藏空白更改
内联并排

Showing with 172 addition and 167 deletion

pages/component/scroll-view/scroll-view-refresher-props.uvue pages/component/scroll-view/scroll-view-refresher-props.uvue +172 -167

未找到文件。
--- a/pages/component/scroll-view/scroll-view-refresher-props.uvue
+++ b/pages/component/scroll-view/scroll-view-refresher-props.uvue
 <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;
-			refresherrestore() {
+		        //不能同时关闭下拉状态和关闭下拉刷新。
-				console.log("下拉刷新被复位");
+		        setTimeout(() => {
-			},
+		        	this.refresherTriggered = false;
-			refresherabort() {
+		        }, 1500)
-				console.log("下拉刷新被中止");
+			},
-			}
+			refresherrestore() {
-		}
+				console.log("下拉刷新被复位");
-	}
+			},
-</script>
+			refresherabort() {
+				console.log("下拉刷新被中止");
-<style>
+			}
-	.uni-margin-wrap {
+		}
-		height: 400rpx;
+	}
-		margin-left: 50rpx;
+</script>
-		margin-right: 50rpx;
-	}
+<style>
+	.uni-margin-wrap {
-	.item {
+		height: 400rpx;
-		justify-content: center;
+		margin-left: 50rpx;
-		align-items: center;
+		margin-right: 50rpx;
-		height: 400rpx;
+	}
-		width: 100%;
-		background-color: azure;
+	.item {
-		border-width: 2rpx;
+		justify-content: center;
-		border-color: chocolate;
+		align-items: center;
-	}
+		height: 400rpx;
+		width: 100%;
-	.uni-text {
+		background-color: azure;
-		color: black;
+		border-width: 2rpx;
-		font-size: 50px;
+		border-color: chocolate;
 	}
-	.uni-list {
+	.uni-text {
-		flex: 1;
+		color: black;
-		margin: 50rpx 50rpx 0rpx 50rpx;
+		font-size: 50px;
 	}
-	.uni-option {
+	.uni-list {
-		height: 100rpx;
+		flex: 1;
-		flex-direction: row;
+		margin: 50rpx 50rpx 0rpx 50rpx;
-		justify-content: space-between;
+	}
-		align-items: center;
-		padding: 20rpx;
+	.uni-option {
-	}
+		height: 100rpx;
+		flex-direction: row;
-	.picker-view {
+		justify-content: space-between;
-		width: 100%;
+		align-items: center;
-		height: 320px;
+		padding: 20rpx;
-		margin-top: 10px;
+	}
-	}
-</style>
+	.picker-view {
\ No newline at end of file
+		width: 100%;
+		height: 320px;
+		margin-top: 10px;
+	}
+</style>