From b594a3c672df64558effc02208557601ec1a79e6 Mon Sep 17 00:00:00 2001
From: shutao-dc <shutao@dcloud.io>
Date: Thu, 7 Sep 2023 15:40:15 +0800
Subject: [PATCH] Update list-view.uvue

---
 pages/component/list-view/list-view.uvue | 229 +++++++++++++----------
 1 file changed, 128 insertions(+), 101 deletions(-)

diff --git a/pages/component/list-view/list-view.uvue b/pages/component/list-view/list-view.uvue
index c2c64d94..5777db59 100644
--- a/pages/component/list-view/list-view.uvue
+++ b/pages/component/list-view/list-view.uvue
@@ -1,111 +1,138 @@
 <script>
-
-export default {
-	data() {
-		return {
-			refresher_triggered_boolean: false,
-			refresher_enabled_boolean: false,
-			scroll_with_animation_boolean: false,
-			show_scrollbar_boolean: true,
-			rebound_boolean: true,
-			scroll_y_boolean: true,
-			scroll_x_boolean: false,
-			upper_threshold_input: 50,
-			lower_threshold_input: 50,
-			scroll_top_input: 0,
-			scroll_left_input: 0,
-			refresher_background_input: "#FFF",
-      scrollData: [] as Array <string>
-		}
-	},
-  onLoad() {
-  	let lists: Array < string > = []
-  	for (let i = 0; i < 10; i++) {
-  		lists.push("item---"+i)
-  	}
-  	this.scrollData = lists
-  },
-	methods: {
-		list_view_click() { console.log("组件被点击时触发") },
-		list_view_touchstart() { console.log("手指触摸动作开始") },
-		list_view_touchmove() { console.log("手指触摸后移动") },
-		list_view_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
-		list_view_touchend() { console.log("手指触摸动作结束") },
-		list_view_tap() { console.log("手指触摸后马上离开") },
-		list_view_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
-		list_view_refresherpulling() { console.log("自定义下拉刷新控件被下拉") },
-		list_view_refresherrefresh() { console.log("自定义下拉刷新被触发") },
-		list_view_refresherrestore() { console.log("自定义下拉刷新被复位") },
-		list_view_refresherabort() { console.log("自定义下拉刷新被中止") },
-		list_view_scrolltoupper() { console.log("滚动到顶部/左边，会触发 scrolltoupper 事件") },
-		list_view_scrolltolower() { console.log("滚动到底部/右边，会触发 scrolltolower 事件") },
-		list_view_scroll() { console.log("滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}") },
-		list_item_click() { console.log("list-item组件被点击时触发") },
-		list_item_touchstart() { console.log("手指触摸list-item组件动作开始") },
-		list_item_touchmove() { console.log("手指触摸list-item组件后移动") },
-		list_item_touchcancel() { console.log("手指触摸list-item组件动作被打断，如来电提醒，弹窗") },
-		list_item_touchend() { console.log("手指触摸list-item组件动作结束") },
-		list_item_tap() { console.log("手指触摸list-item组件后马上离开") },
-		list_item_longpress() { console.log("list-item组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
-		change_refresher_triggered_boolean(checked : boolean) { this.refresher_triggered_boolean = checked },
-		change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },
-		change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },
-		change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },
-		change_rebound_boolean(checked : boolean) { this.rebound_boolean = checked },
-		change_scroll_y_boolean(checked : boolean) { this.scroll_y_boolean = checked },
-		change_scroll_x_boolean(checked : boolean) { this.scroll_x_boolean = checked },
-		confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },
-		confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },
-		confirm_scroll_top_input(value : number) { this.scroll_top_input = value },
-		confirm_scroll_left_input(value : number) { this.scroll_left_input = value },
-		confirm_refresher_background_input(value : string) { this.refresher_background_input = value }
-	}
-}
+  export default {
+    data() {
+      return {
+        refresher_triggered_boolean: false,
+        refresher_enabled_boolean: false,
+        scroll_with_animation_boolean: false,
+        show_scrollbar_boolean: true,
+        rebound_boolean: true,
+        scroll_y_boolean: true,
+        scroll_x_boolean: false,
+        upper_threshold_input: 50,
+        lower_threshold_input: 50,
+        scroll_top_input: 0,
+        scroll_left_input: 0,
+        refresher_background_input: "#FFF",
+        scrollData: [] as Array<string>
+      }
+    },
+    onLoad() {
+      let lists : Array<string> = []
+      for (let i = 0; i < 10; i++) {
+        lists.push("item---" + i)
+      }
+      this.scrollData = lists
+    },
+    methods: {
+      list_view_click() { console.log("组件被点击时触发") },
+      list_view_touchstart() { console.log("手指触摸动作开始") },
+      list_view_touchmove() { console.log("手指触摸后移动") },
+      list_view_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
+      list_view_touchend() { console.log("手指触摸动作结束") },
+      list_view_tap() { console.log("手指触摸后马上离开") },
+      list_view_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
+      list_view_refresherpulling() { console.log("自定义下拉刷新控件被下拉") },
+      list_view_refresherrefresh() { 
+        console.log("自定义下拉刷新被触发") 
+        this.refresher_triggered_boolean = true
+        setTimeout(function(){
+        	this.refresher_triggered_boolean = false
+        }, 1500)
+      },
+      list_view_refresherrestore() { console.log("自定义下拉刷新被复位") },
+      list_view_refresherabort() { console.log("自定义下拉刷新被中止") },
+      list_view_scrolltoupper() { console.log("滚动到顶部/左边，会触发 scrolltoupper 事件") },
+      list_view_scrolltolower() { console.log("滚动到底部/右边，会触发 scrolltolower 事件") },
+      list_view_scroll() { console.log("滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}") },
+      list_item_click() { console.log("list-item组件被点击时触发") },
+      list_item_touchstart() { console.log("手指触摸list-item组件动作开始") },
+      list_item_touchmove() { console.log("手指触摸list-item组件后移动") },
+      list_item_touchcancel() { console.log("手指触摸list-item组件动作被打断，如来电提醒，弹窗") },
+      list_item_touchend() { console.log("手指触摸list-item组件动作结束") },
+      list_item_tap() { console.log("手指触摸list-item组件后马上离开") },
+      list_item_longpress() { console.log("list-item组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
+      change_refresher_triggered_boolean(checked : boolean) { this.refresher_triggered_boolean = checked },
+      change_refresher_enabled_boolean(checked : boolean) { this.refresher_enabled_boolean = checked },
+      change_scroll_with_animation_boolean(checked : boolean) { this.scroll_with_animation_boolean = checked },
+      change_show_scrollbar_boolean(checked : boolean) { this.show_scrollbar_boolean = checked },
+      change_rebound_boolean(checked : boolean) { this.rebound_boolean = checked },
+      change_scroll_y_boolean(checked : boolean) { this.scroll_y_boolean = checked },
+      change_scroll_x_boolean(checked : boolean) { this.scroll_x_boolean = checked },
+      confirm_upper_threshold_input(value : number) { this.upper_threshold_input = value },
+      confirm_lower_threshold_input(value : number) { this.lower_threshold_input = value },
+      confirm_scroll_top_input(value : number) { this.scroll_top_input = value },
+      confirm_scroll_left_input(value : number) { this.scroll_left_input = value },
+      confirm_refresher_background_input(value : string) { this.refresher_background_input = value }
+    }
+  }
 </script>
 
 <template>
-	<view class="main">
-	<list-view :scroll-x="scroll_x_boolean" :scroll-y="scroll_y_boolean" :rebound="rebound_boolean" :upper-threshold="upper_threshold_input" :lower-threshold="lower_threshold_input" :scroll-top="scroll_top_input" :scroll-left="scroll_left_input" :show-scrollbar="show_scrollbar_boolean" :scroll-with-animation="scroll_with_animation_boolean" :refresher-enabled="refresher_enabled_boolean" :refresher-background="refresher_background_input" :refresher-triggered="refresher_triggered_boolean" @click="list_view_click" @touchstart="list_view_touchstart" @touchmove="list_view_touchmove" @touchcancel="list_view_touchcancel" @touchend="list_view_touchend" @tap="list_view_tap" @longpress="list_view_longpress" @refresherpulling="list_view_refresherpulling" @refresherrefresh="list_view_refresherrefresh" @refresherrestore="list_view_refresherrestore" @refresherabort="list_view_refresherabort" @scrolltoupper="list_view_scrolltoupper" @scrolltolower="list_view_scrolltolower" @scroll="list_view_scroll" style="width:100%;"><list-item v-for="key in scrollData" :key="key" @click="list_item_click" @touchstart="list_item_touchstart" @touchmove="list_item_touchmove" @touchcancel="list_item_touchcancel" @touchend="list_item_touchend" @tap="list_item_tap" @longpress="list_item_longpress" class="list-item"><text>{{key}}</text></list-item></list-view>
-	</view>
+  <view class="main">
+    <list-view :scroll-x="scroll_x_boolean" :scroll-y="scroll_y_boolean" :rebound="rebound_boolean"
+      :upper-threshold="upper_threshold_input" :lower-threshold="lower_threshold_input" :scroll-top="scroll_top_input"
+      :scroll-left="scroll_left_input" :show-scrollbar="show_scrollbar_boolean"
+      :scroll-with-animation="scroll_with_animation_boolean" :refresher-enabled="refresher_enabled_boolean"
+      :refresher-background="refresher_background_input" :refresher-triggered="refresher_triggered_boolean"
+      @click="list_view_click" @touchstart="list_view_touchstart" @touchmove="list_view_touchmove"
+      @touchcancel="list_view_touchcancel" @touchend="list_view_touchend" @tap="list_view_tap"
+      @longpress="list_view_longpress" @refresherpulling="list_view_refresherpulling"
+      @refresherrefresh="list_view_refresherrefresh" @refresherrestore="list_view_refresherrestore"
+      @refresherabort="list_view_refresherabort" @scrolltoupper="list_view_scrolltoupper"
+      @scrolltolower="list_view_scrolltolower" @scroll="list_view_scroll" style="width:100%;">
+      <list-item
+        v-for="key in scrollData" :key="key" @click="list_item_click" @touchstart="list_item_touchstart"
+        @touchmove="list_item_touchmove" @touchcancel="list_item_touchcancel" @touchend="list_item_touchend"
+        @tap="list_item_tap" @longpress="list_item_longpress"
+        class="list-item">
+        <text>{{key}}</text>
+      </list-item>
+    </list-view>
+  </view>
 
-	<!-- #ifdef APP -->
-	<scroll-view style="flex:1">
-	<!-- #endif -->
-	<view class="content nvue">
-			<boolean-data :defaultValue="false" title="设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发" @change="change_refresher_triggered_boolean"></boolean-data>
-		<boolean-data :defaultValue="false" title="开启自定义下拉刷新" @change="change_refresher_enabled_boolean"></boolean-data>
-		<boolean-data :defaultValue="false" title="是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画" @change="change_scroll_with_animation_boolean"></boolean-data>
-		<boolean-data :defaultValue="true" title="控制是否出现滚动条" @change="change_show_scrollbar_boolean"></boolean-data>
-		<boolean-data :defaultValue="true" title="控制是否回弹效果" @change="change_rebound_boolean"></boolean-data>
-		<boolean-data :defaultValue="true" title="允许纵向滚动" @change="change_scroll_y_boolean"></boolean-data>
-		<boolean-data :defaultValue="false" title="允许横向滚动" @change="change_scroll_x_boolean"></boolean-data>
-		<input-data defaultValue="50" title="距顶部/左边多远时（单位px），触发 scrolltoupper 事件" type="number" @confirm="confirm_upper_threshold_input"></input-data>
-		<input-data defaultValue="50" title="距底部/右边多远时（单位px），触发 scrolltolower 事件" type="number" @confirm="confirm_lower_threshold_input"></input-data>
-		<input-data defaultValue="0" title="设置竖向滚动条位置" type="number" @confirm="confirm_scroll_top_input"></input-data>
-		<input-data defaultValue="0" title="设置横向滚动条位置" type="number" @confirm="confirm_scroll_left_input"></input-data>
-		<input-data defaultValue="#FFF" title="设置自定义下拉刷新区域背景颜色" type="text" @confirm="confirm_refresher_background_input"></input-data>
-	</view>
-	<!-- #ifdef APP -->
-	</scroll-view>
-	<!-- #endif -->
+  <!-- #ifdef APP -->
+  <scroll-view style="flex:1">
+    <!-- #endif -->
+    <view class="content nvue">
+      <boolean-data :defaultValue="false" title="设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发"
+        @change="change_refresher_triggered_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="开启自定义下拉刷新" @change="change_refresher_enabled_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="是否在设置滚动条位置时使用滚动动画，设置false没有滚动动画"
+        @change="change_scroll_with_animation_boolean"></boolean-data>
+      <boolean-data :defaultValue="true" title="控制是否出现滚动条" @change="change_show_scrollbar_boolean"></boolean-data>
+      <boolean-data :defaultValue="true" title="控制是否回弹效果" @change="change_rebound_boolean"></boolean-data>
+      <boolean-data :defaultValue="true" title="允许纵向滚动" @change="change_scroll_y_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="允许横向滚动" @change="change_scroll_x_boolean"></boolean-data>
+      <input-data defaultValue="50" title="距顶部/左边多远时（单位px），触发 scrolltoupper 事件" type="number"
+        @confirm="confirm_upper_threshold_input"></input-data>
+      <input-data defaultValue="50" title="距底部/右边多远时（单位px），触发 scrolltolower 事件" type="number"
+        @confirm="confirm_lower_threshold_input"></input-data>
+      <input-data defaultValue="0" title="设置竖向滚动条位置" type="number" @confirm="confirm_scroll_top_input"></input-data>
+      <input-data defaultValue="0" title="设置横向滚动条位置" type="number" @confirm="confirm_scroll_left_input"></input-data>
+      <input-data defaultValue="#FFF" title="设置自定义下拉刷新区域背景颜色" type="text"
+        @confirm="confirm_refresher_background_input"></input-data>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <style>
-.main {
-	max-height: 500rpx;
-	padding: 10rpx 0;
-	border-bottom: 1px solid rgba(0,0,0,.06);
-	flex-direction: row;
-	justify-content: center;
-}
-
-.main .list-item {
-	width: 750rpx;
-	height: 480rpx;
-	border: 1px solid #666;
-	background-color:#66ccff;
-	align-items: center;
-  justify-content: center;
-}
+  .main {
+    max-height: 500rpx;
+    padding: 10rpx 0;
+    border-bottom: 1px solid rgba(0, 0, 0, .06);
+    flex-direction: row;
+    justify-content: center;
+  }
 
+  .main .list-item {
+    width: 750rpx;
+    height: 480rpx;
+    border: 1px solid #666;
+    background-color: #66ccff;
+    align-items: center;
+    justify-content: center;
+  }
 </style>
-- 
GitLab