From f5e2d9b00f63ceef276e43b398333063e4b3a6cd Mon Sep 17 00:00:00 2001
From: mehaotian <490272692@qq.com>
Date: Wed, 16 Aug 2023 16:13:43 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0=E7=A4=BA=E4=BE=8B=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E9=83=A8=E5=88=86=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scroll-fold-header.uvue                   | 193 +++++++++++-------
 .../scroll-fold-nav/scroll-fold-nav.uvue      | 140 ++++++++-----
 .../scroll-fold-nav2/scroll-fold-nav2.uvue    | 110 +++++++---
 3 files changed, 282 insertions(+), 161 deletions(-)

diff --git a/pages/template/scroll-fold-nav/scroll-fold-header/scroll-fold-header.uvue b/pages/template/scroll-fold-nav/scroll-fold-header/scroll-fold-header.uvue
index 561cacaf..b2021371 100644
--- a/pages/template/scroll-fold-nav/scroll-fold-header/scroll-fold-header.uvue
+++ b/pages/template/scroll-fold-nav/scroll-fold-header/scroll-fold-header.uvue
@@ -1,82 +1,119 @@
-<template>
-  <view class="top-box" :style="{height:(110 - (scrollTop>40?40:scrollTop) )+'px','background-color': 'rgba(255, 255, 255, '+(scrollTop*3>100?100:scrollTop*3)/100+')'}">
-    <view class="scroll-fold-nav"
-      :style="{'opacity': 1 -(scrollTop*3>100?100:scrollTop*3)/100}"
-    >
-      <view style="margin-left: 30px;">DCloud 为开发者而生</view>
-    </view>
-    <view @click="back" class="back" style="position: absolute;top:35px;left: 8px;">
-      <image src="/static/template/scroll-fold-nav/back.png" style="width: 20px;" mode="widthFix"></image>
-    </view>
-    <view class="search" @click="toSearchPage" :style="{
-      'width':maxSearchWidth - (scrollTop>40?40:scrollTop) +'rpx',
-      'top':0 - (scrollTop>40?40:scrollTop) +'px'
-    }">
-      <view style="flex-direction: row;">
-        <image src="/static/template/scroll-fold-nav/search.png" style="width: 15px;" mode="widthFix"></image>
-        <text class="search-tip-text">请输入你要搜索的内容</text>
-      </view>
-      <text class="search-btn">搜索</text>
-    </view>
-  </view>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        scrollTop: 0,
-        maxSearchWidth: 700
-      }
-    },
-    methods: {
-      toSearchPage(){
-        this.$emit('toSearchPage')
-      },
-      back(){
-        this.$emit('back')
-      }
-    }
-  }
-</script>
-
-<style>
-.top-box {
-    position: fixed;
-    top: 0;
-    padding-top: 25px;
-    align-items: flex-end;
-    border-bottom: 1px solid #efefef;
-  }
+<template>
+	<view class="top-box" :style="headBoxStyle">
+		<view class="scroll-fold-nav" :style="titleStyle">
+			<view class="nav-title">DCloud 为开发者而生</view>
+		</view>
+		<view @click="back" class="nav-back">
+			<image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
+		</view>
+		<view class="search" @click="toSearchPage" :style="{
+      'width':maxSearchWidth - (scrollTop>40?40:scrollTop) +'rpx',
+      'top':0 - (scrollTop>40?40:scrollTop) +'px'
+    }">
+			<view class="search-inner">
+				<image class="search-img" src="/static/template/scroll-fold-nav/search.png" mode="widthFix"></image>
+				<text class="search-tip-text">请输入你要搜索的内容</text>
+			</view>
+			<text class="search-btn">搜索</text>
+		</view>
+	</view>
+</template>
 
-  .scroll-fold-nav {
-    height: 44px;
-    width: 750rpx;
-    justify-content: center;
-  }
+<script>
+	export default {
+		data() {
+			return {
+				scrollTop: 0,
+				maxSearchWidth: 700
+			}
+		},
+		computed: {
+			// 修理导航栏头部高度和背景颜色变化
+			headBoxStyle() : string {
+				const scrollTop = this.scrollTop
+				let style = `height:  ${110 - (scrollTop > 40 ? 40 : scrollTop)}px;background-color: rgba(255, 255, 255, ${(scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100})`
+		
+				return style
+			},
+			// 处理导航栏标题透明度变化
+			titleStyle() : string {
+				const scrollTop = this.scrollTop
+				let style = `opacity: ${1 - (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100}`
+				return style
+			}
+		},
+		methods: {
+			toSearchPage() {
+				this.$emit('toSearchPage')
+			},
+			back() {
+				this.$emit('back')
+			}
+		}
+	}
+</script>
 
-  .search {
-    background-color: #FFFFFF;
-    border: 1px solid #fbdf0d;
-    height: 35px;
-    border-radius: 100px;
-    margin: 0 25rpx;
-    padding: 8px;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
+<style>
+	.top-box {
+		position: fixed;
+		top: 0;
+		padding-top: 25px;
+		align-items: flex-end;
+		border-bottom: 1px solid #efefef;
+	}
 
-  .search-tip-text {
-    font-size: 12px;
-    color: #666;
-  }
+	.scroll-fold-nav {
+		height: 44px;
+		width: 750rpx;
+		justify-content: center;
+	}
 
-  .search-btn {
-    font-size: 12px;
-    background-color: #ff6900;
-    color: #FFF;
-    padding: 5px 8px;
-    border-radius: 100px;
-  }
-</style>
+	.nav-title {
+		margin-left: 30px;
+	}
+
+	.nav-back {
+		position: absolute;
+		top: 35px;
+		left: 8px;
+	}
+
+	.nav-back .back-img {
+		width: 18px;
+		margin-top: 2px;
+	}
+
+	.search {
+		background-color: #FFFFFF;
+		border: 1px solid #fbdf0d;
+		height: 35px;
+		border-radius: 100px;
+		margin: 0 25rpx;
+		padding: 8px;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.search-inner {
+		margin-top: 2px;
+		flex-direction: row;
+	}
+
+	.search-inner .search-img {
+		width: 15px;
+	}
+
+	.search-tip-text {
+		font-size: 12px;
+		color: #666;
+	}
+
+	.search-btn {
+		font-size: 12px;
+		background-color: #ff6900;
+		color: #FFF;
+		padding: 5px 8px;
+		border-radius: 100px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/template/scroll-fold-nav/scroll-fold-nav.uvue b/pages/template/scroll-fold-nav/scroll-fold-nav.uvue
index 4ad647bd..77fe4b95 100644
--- a/pages/template/scroll-fold-nav/scroll-fold-nav.uvue
+++ b/pages/template/scroll-fold-nav/scroll-fold-nav.uvue
@@ -1,64 +1,94 @@
 <template>
-  <view class="page">
-    <scroll-view :scroll-y="true" @scroll="onScroll" class="scroll-view">
-      <view class="content">
-        <view style="height: 110px;">
-          <!-- 垫高专用 -->
-        </view>
-        <view v-for="(item,index) in 20" :key="index" style="height: 100px;background-color: #FFF;">
-          content-{{item}}
-        </view>
-      </view>
-    </scroll-view>
-    <scroll-fold-header ref="header" @back="back" @toSearchPage="toSearchPage()"/>
-  </view>
+	<view class="page">
+		<scroll-view :scroll-y="true" @scroll="onScroll" class="scroll-view">
+			<view class="height-seat">
+				<!-- 垫高专用 -->
+			</view>
+			<view class="content">
+				<view class="content-item">
+					<text class="text">1. 当前示例监听了 scroll-view 的 scroll 事件 ，滚动页面实时监听 scrollTop。</text>
+					<text class="text">2. 在模板中根据 scrollTop 的变化，通过 style 修改搜索导航栏的高度、位置和背景颜色等样式，从而达到滚动折叠的效果。</text>
+					<text class="text">3. 请向上\向下滚动页面观察效果。</text>
+				</view>
+				<view class="content-item" v-for="(item,index) in 20" :key="index">
+					<text class="text">content-{{item}}</text>
+				</view>
+			</view>
+		</scroll-view>
+		<scroll-fold-header ref="header" @back="back" @toSearchPage="toSearchPage()" />
+	</view>
 </template>
 
 <script>
-  import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
-  import scrollFoldHeader from './scroll-fold-header/scroll-fold-header.uvue';
-  export default {
-    components:{scrollFoldHeader},
-    data() {
-      return {}
-    },
-    methods: {
-      onScroll(e : ScrollEvent) {
-        (this.$refs['header'] as ComponentPublicInstance).$data['scrollTop'] = (e.detail.scrollTop<0?0:e.detail.scrollTop)
-      },
-      back() {
-        // uni.navigateBack()  // 这么写用不了
-        // 这么写可以用
-        uni.navigateBack({
-          success(result) {
-            console.log('navigateBack success', result.errMsg)
-          },
-          fail(error) {
-            console.log('navigateBack fail', error.errMsg)
-          },
-          complete(result) {
-            console.log('navigateBack complete', result.errMsg)
-          },
-        })
-      },
-      toSearchPage() {
-        uni.showToast({
-          title: '暂不支持',
-          icon: 'none'
-        });
-      }
-    },
-    onLoad() {}
-  }
+	import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
+	import scrollFoldHeader from './scroll-fold-header/scroll-fold-header.uvue';
+	export default {
+		components: { scrollFoldHeader },
+		data() {
+			return {}
+		},
+		methods: {
+			onScroll(e : ScrollEvent) {
+				(this.$refs['header'] as ComponentPublicInstance).$data['scrollTop'] = (e.detail.scrollTop < 0 ? 0 : e.detail.scrollTop)
+			},
+			back() {
+				// uni.navigateBack()  // 这么写用不了
+				// 这么写可以用
+				uni.navigateBack({
+					success(result) {
+						console.log('navigateBack success', result.errMsg)
+					},
+					fail(error) {
+						console.log('navigateBack fail', error.errMsg)
+					},
+					complete(result) {
+						console.log('navigateBack complete', result.errMsg)
+					},
+				})
+			},
+			toSearchPage() {
+				uni.showToast({
+					title: '暂不支持',
+					icon: 'none'
+				});
+			}
+		},
+		onLoad() { }
+	}
 </script>
 
 <style>
-  .page {
-    flex: 1;
-    background-color: #fbdf0d;
-  }
+	.page {
+		flex: 1;
+		background-color: #fbdf0d;
+		/* background-color: #f5f5f5; */
+	}
 
-  .scroll-view {
-    flex: 1;
-  }
+	.scroll-view {
+		flex: 1;
+	}
+
+	.height-seat {
+		height: 110px;
+		/* background-color: #fbdf0d; */
+	}
+
+	.content {
+		padding: 5px 15px;
+		background-color: #f5f5f5;
+	}
+
+	.content-item {
+		padding: 15px;
+		margin: 5px 0;
+		background-color: #fff;
+		border-radius: 5px;
+
+	}
+
+	.text {
+		font-size: 14px;
+		color: #666;
+		line-height: 20px;
+	}
 </style>
\ No newline at end of file
diff --git a/pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue b/pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue
index 9a7ea33c..1088ae65 100644
--- a/pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue
+++ b/pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue
@@ -1,26 +1,31 @@
 <template>
   <view class="page">
-    <scroll-view :scroll-y="true" @scroll="onScroll" class="scroll-view" bounces="false">
-      <view class="content">
-        <view style="height: 110px;">
-          <!-- 垫高专用 -->
-        </view>
-        <view v-for="(item,index) in 20" :key="index" style="height: 100px;background-color: #FFF;">
-          content-{{item}}
+    <scroll-view :scroll-y="true" @scroll="onScroll" class="scroll-view" bounces="false">
+			<view class="height-seat" style="height: 110px;">
+			  <!-- 垫高专用 -->
+			</view>
+      <view class="content">
+				<view class="content-item">
+					<text class="text">1. 当前示例监听了 scroll-view 的 scroll 事件 ，滚动页面实时监听scrollTop。</text>
+					<text class="text">2. 与上一个示例不同的是，此示例使用 ref 直接获取了元素的节点，并在 scroll 事件中通过节点的 setProperty 方法来修改搜索导航栏的高度、位置和背景颜色等样式，从而达到滚动折叠的效果。</text>
+					<text class="text">3. 请向上\向下滚动页面观察效果。</text>
+				</view>
+        <view class="content-item" v-for="(item,index) in 20" :key="index">
+          <text class="text">content-{{item}}</text>
         </view>
       </view>
     </scroll-view>
 
-    <view ref="top-box" class="top-box" style="height:110px;background-color:rgba(255,255,255,0)">
+    <view ref="top-box" class="top-box">
       <view ref="scroll-fold-nav" class="scroll-fold-nav">
-        <view style="margin-left: 30px;">DCloud 为开发者而生</view>
+        <view class="nav-title">DCloud 为开发者而生</view>
       </view>
-      <view @click="back" class="back" style="position: absolute;top:35px;left: 8px;">
-        <image src="/static/template/scroll-fold-nav/back.png" style="width: 20px;" mode="widthFix"></image>
+      <view @click="back" class="nav-back">
+        <image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
       </view>
-      <view ref="search" class="search" @click="toSearchPage" style="width:700rpx;top:0px">
-        <view style="flex-direction: row;">
-          <image src="/static/template/scroll-fold-nav/search.png" style="width: 15px;" mode="widthFix"></image>
+      <view ref="search" class="search" @click="toSearchPage">
+        <view class="search-inner">
+          <image class="search-img" src="/static/template/scroll-fold-nav/search.png" mode="widthFix"></image>
           <text class="search-tip-text">请输入你要搜索的内容</text>
         </view>
         <text class="search-btn">搜索</text>
@@ -41,7 +46,13 @@
         boxNode: null as INode | null,
         navNode: null as INode | null
       }
-    },
+    },
+		onLoad() {},
+		onReady() {
+		  this.searchNode = this.$refs['search'] as INode;
+		  this.boxNode = this.$refs['top-box'] as INode;
+		  this.navNode = this.$refs['scroll-fold-nav'] as INode;
+		},
     methods: {
       onScroll(e : ScrollEvent) {
         let scrollTop = e.detail.scrollTop
@@ -79,13 +90,7 @@
         });
       }
     },
-    onLoad() {
-    },
-    onReady() {
-      this.searchNode = this.$refs['search'] as INode;
-      this.boxNode = this.$refs['top-box'] as INode;
-      this.navNode = this.$refs['scroll-fold-nav'] as INode;
-    }
+    
   }
 </script>
 
@@ -97,22 +102,60 @@
 
   .scroll-view {
     flex: 1;
-  }
+  }
+	
+	.height-seat {
+		height: 110px;
+		/* background-color: #fbdf0d; */
+	}
+	.content {
+		padding: 5px 15px;
+		background-color: #f5f5f5;
+	}
+	.content-item {
+		padding: 15px;
+		margin: 5px 0;
+		background-color: #fff;
+		border-radius: 5px;
+		
+	} 
+	.text {
+		font-size: 14px;
+		color: #666; 
+		line-height: 20px;
+	}
 
   .top-box {
     position: fixed;
     top: 0;
     padding-top: 25px;
     align-items: flex-end;
-    border-bottom: 1px solid #efefef;
+    border-bottom: 1px solid #efefef;
+		height:110px;
+		background-color:rgba(255,255,255,0)
   }
 
   .scroll-fold-nav {
     height: 44px;
     width: 750rpx;
     justify-content: center;
-  }
-
+  }
+	
+	.nav-title {
+		margin-left: 30px;
+	}
+	
+	.nav-back {
+		position: absolute;
+		top: 35px;
+		left: 8px;
+	}
+	
+	.nav-back .back-img {
+		width: 18px;
+		margin-top: 2px;
+	}
+	
   .search {
     background-color: #FFFFFF;
     border: 1px solid #fbdf0d;
@@ -122,8 +165,19 @@
     padding: 8px;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
-  }
+    justify-content: space-between;
+		width:700rpx;
+		top:0px
+  }
+	
+	.search-inner {
+		margin-top: 2px;
+		flex-direction: row;
+	}
+	
+	.search-inner .search-img {
+		width: 15px;
+	}
 
   .search-tip-text {
     font-size: 12px;
-- 
GitLab