From 41fc6e53d1a5001059bd44d22ad095b82348d52f Mon Sep 17 00:00:00 2001
From: wanganxp <wanganxp@gmail.com>
Date: Tue, 29 Aug 2023 08:20:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84scroll-view=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scroll-view/scroll-view-props.uvue        |   6 +-
 pages/component/scroll-view/scroll-view.uvue  | 282 ++++++++----------
 2 files changed, 118 insertions(+), 170 deletions(-)

diff --git a/pages/component/scroll-view/scroll-view-props.uvue b/pages/component/scroll-view/scroll-view-props.uvue
index 3b2e250b..43a7309b 100644
--- a/pages/component/scroll-view/scroll-view-props.uvue
+++ b/pages/component/scroll-view/scroll-view-props.uvue
@@ -34,10 +34,6 @@
 				<text>是否有反弹效果</text>
 				<switch :checked="bounces" @change="bounces=!bounces"></switch>
 			</view>
-			<view class="uni-option">
-				<text>是否开启双击标题栏返回顶部</text>
-				<switch :checked="enableBackToTop" @change="enableBackToTop=!enableBackToTop"></switch>
-			</view>
 			<view class="uni-option">
 				<text>是否开启滚动时使用动画过渡</text>
 				<switch :checked="scrollWithAnimation" @change="scrollWithAnimation=!scrollWithAnimation"></switch>
@@ -206,7 +202,7 @@
 	}
 
 	.uni-slider {
-		height: 100rpx;
+		height: 60px;
 		padding: 30rpx;
 		justify-content: center;
 	}
diff --git a/pages/component/scroll-view/scroll-view.uvue b/pages/component/scroll-view/scroll-view.uvue
index 0cb2070c..d6321f96 100644
--- a/pages/component/scroll-view/scroll-view.uvue
+++ b/pages/component/scroll-view/scroll-view.uvue
@@ -1,178 +1,130 @@
 <template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex: 1">
-    <!-- #endif -->
-    <view>
-      <page-head title="scroll-view,区域滚动视图"></page-head>
-      <view class="uni-padding-wrap uni-common-mt">
-        <view class="uni-title uni-common-mt">
-          <text class="uni-title-text">Vertical Scroll</text>
-          <text class="uni-subtitle-text">纵向滚动</text>
-        </view>
-        <view>
-          <scroll-view
-            :scrollTop="scrollTop"
-            :scrollY="true"
-            class="scroll-Y"
-            scroll-with-animation="true"
-            @scrolltoupper="upper"
-            @scrolltolower="lower"
-            @scroll="scroll"
-          >
-            <view id="demo1" class="scroll-view-item uni-bg-red"
-              ><text class="text">A</text></view
-            >
-            <view id="demo2" class="scroll-view-item uni-bg-green"
-              ><text class="text">B</text></view
-            >
-            <view id="demo3" class="scroll-view-item uni-bg-blue"
-              ><text class="text">C</text></view
-            >
-          </scroll-view>
-        </view>
-        <view @tap="goTop" class="uni-center uni-common-mt">
-          <text class="uni-link">点击这里返回顶部</text>
-        </view>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+		<!-- #endif -->
+		<view>
+			<page-head title="scroll-view,区域滚动视图"></page-head>
+			<view class="uni-padding-wrap uni-common-mt">
+				<view class="uni-title uni-common-mt">
+					<text class="uni-title-text">Vertical Scroll</text>
+					<text class="uni-subtitle-text">纵向滚动</text>
+				</view>
+				<view>
+					<scroll-view :scrollTop="scrollTop" :scrollY="true" class="scroll-Y" scroll-with-animation="true"
+						@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
+						<view id="demo1" class="scroll-view-item uni-bg-red"><text class="text">A</text></view>
+						<view id="demo2" class="scroll-view-item uni-bg-green"><text class="text">B</text></view>
+						<view id="demo3" class="scroll-view-item uni-bg-blue"><text class="text">C</text></view>
+					</scroll-view>
+				</view>
+				<view @tap="goTop" class="uni-center uni-common-mt">
+					<text class="uni-link">点击这里返回顶部</text>
+				</view>
 
-        <view class="uni-title uni-common-mt">
-          <text class="uni-subtitle-text">下拉刷新</text>
-        </view>
-        <button
-          type="primary"
-          class="button default-button"
-          @click="gotoRefresher"
-        >
-          跳转"下拉刷新示例"
-        </button>
+				<view class="uni-title uni-common-mt">
+					<text class="uni-title-text">Horizontal Scroll</text>
+					<text class="uni-subtitle-text">横向滚动</text>
+				</view>
+				<view>
+					<scroll-view class="scroll-view_H" :scrollX="true" @scroll="scroll" :scrollLeft="120">
+						<view id="demo1" class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
+						<view id="demo2" class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
+						<view id="demo3" class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
+					</scroll-view>
+				</view>
 
-        <view class="uni-title uni-common-mt">
-          <text class="uni-title-text">Horizontal Scroll</text>
-          <text class="uni-subtitle-text">横向滚动</text>
-        </view>
-        <view>
-          <scroll-view
-            class="scroll-view_H"
-            :scrollX="true"
-            @scroll="scroll"
-            :scrollLeft="120"
-          >
-            <view id="demo1" class="scroll-view-item_H uni-bg-red"
-              ><text class="text">A</text></view
-            >
-            <view id="demo2" class="scroll-view-item_H uni-bg-green"
-              ><text class="text">B</text></view
-            >
-            <view id="demo3" class="scroll-view-item_H uni-bg-blue"
-              ><text class="text">C</text></view
-            >
-          </scroll-view>
-        </view>
-        
-		<button
-		  type="primary"
-		  class="button default-button"
-		  @click="moreProps"
-		>
-		  非下拉刷新的属性示例
-		</button>
-		<view class="uni-common-pb"></view>
-		<button type="primary" class="button default-button" @click="jumpToRefresher">
-			下拉刷新的属性示例
-		</button>
-		<view class="uni-common-pb"></view>
-		<button type="primary" class="button default-button" @click="jumpToCustomRefresher">
-			自定义下拉刷新的属性示例
-		</button>
-		<view class="uni-common-pb"></view>
-      </view>
-    </view>
-    <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
+				<navigator url="/pages/component/scroll-view/scroll-view-props">
+				<button type="primary" class="button default-button">
+					非下拉刷新的属性示例
+				</button>
+				</navigator>
+				<view class="uni-common-pb"></view>
+				<navigator url="/pages/component/scroll-view/scroll-view-refresher-props">
+				<button type="primary" class="button default-button">
+					下拉刷新的属性示例
+				</button>
+				</navigator>
+				<view class="uni-common-pb"></view>
+				<navigator url="/pages/component/scroll-view/scroll-view-refresher">
+				<button type="primary" class="button default-button"> 默认下拉刷新示例 </button>
+				</navigator>
+				<view class="uni-common-pb"></view>
+				<navigator url="/pages/component/scroll-view/scroll-view-custom-refresher-props">
+				<button type="primary" class="button default-button">
+					自定义下拉刷新示例
+				</button>
+				</navigator>
+				<view class="uni-common-pb"></view>
+			</view>
+		</view>
+		<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>
 <script lang="ts">
-import ScrollToLowerEvent from 'io.dcloud.uniapp.runtime.ScrollToLowerEvent'
-import ScrollToUpperEvent from 'io.dcloud.uniapp.runtime.ScrollToUpperEvent'
-export default {
-  data() {
-    return {
-      scrollTop: 0,
-      oldScrollTop: 0,
-    }
-  },
-  methods: {
-    upper: function (e: ScrollToUpperEvent) {
-      console.log(e)
-    },
-    lower: function (e: ScrollToLowerEvent) {
-      console.log(e)
-    },
-    scroll: function (e: ScrollEvent) {
-      this.oldScrollTop = e.detail.scrollTop
-    },
-    goTop: function () {
-      // 解决view层不同步的问题
-      this.scrollTop = this.oldScrollTop
-      this.$nextTick(function () {
-        this.scrollTop = 0
-      })
-      uni.showToast({
-        icon: 'none',
-        title: '纵向滚动 scrollTop 值已被修改为 0',
-      })
-    },
-    gotoRefresher: function () {
-      uni.navigateTo({
-        url: '/pages/component/scroll-view/scroll-view-refresher',
-      })
-    },
-	moreProps(){
-		uni.navigateTo({
-		  url: '/pages/component/scroll-view/scroll-view-props',
-		})
-	},
-	jumpToRefresher() {
-		uni.navigateTo({
-		  url: '/pages/component/scroll-view/scroll-view-refresher-props',
-		})
-	},
-	jumpToCustomRefresher() {
-		uni.navigateTo({
-		  url: '/pages/component/scroll-view/scroll-view-custom-refresher-props',
-		})
+	import ScrollToLowerEvent from 'io.dcloud.uniapp.runtime.ScrollToLowerEvent'
+	import ScrollToUpperEvent from 'io.dcloud.uniapp.runtime.ScrollToUpperEvent'
+	export default {
+		data() {
+			return {
+				scrollTop: 0,
+				oldScrollTop: 0,
+			}
+		},
+		methods: {
+			upper: function (e : ScrollToUpperEvent) {
+				console.log(e)
+			},
+			lower: function (e : ScrollToLowerEvent) {
+				console.log(e)
+			},
+			scroll: function (e : ScrollEvent) {
+				this.oldScrollTop = e.detail.scrollTop
+			},
+			goTop: function () {
+				// 解决view层不同步的问题
+				this.scrollTop = this.oldScrollTop
+				this.$nextTick(function () {
+					this.scrollTop = 0
+				})
+				uni.showToast({
+					icon: 'none',
+					title: '纵向滚动 scrollTop 值已被修改为 0',
+				})
+			}
+		},
 	}
-  },
-}
 </script>
 
 <style>
-.scroll-Y {
-  height: 300rpx;
-}
+	.scroll-Y {
+		height: 300rpx;
+	}
 
-.scroll-view_H {
-  width: 100%;
-  flex-direction: row;
-}
+	.scroll-view_H {
+		width: 100%;
+		flex-direction: row;
+	}
 
-.scroll-view-item {
-  height: 300rpx;
-  justify-content: center;
-  align-items: center;
-}
+	.scroll-view-item {
+		height: 300rpx;
+		justify-content: center;
+		align-items: center;
+	}
 
-.scroll-view-item_H {
-  width: 690rpx;
-  height: 300rpx;
-  justify-content: center;
-  align-items: center;
-}
+	.scroll-view-item_H {
+		width: 690rpx;
+		height: 300rpx;
+		justify-content: center;
+		align-items: center;
+	}
 
-.text {
-  font-size: 36rpx;
-  color: #ffffff;
-}
-.button {
-  margin-top: 30rpx;
-}
-</style>
+	.text {
+		font-size: 36rpx;
+		color: #ffffff;
+	}
+
+	.button {
+		margin-top: 30rpx;
+	}
+</style>
\ No newline at end of file
-- 
GitLab