From 70b7d11eda3c80b81d4c522863f5df978c89f82c Mon Sep 17 00:00:00 2001
From: yanyilin <yanyilin@dcloud.io>
Date: Mon, 24 Jul 2023 16:16:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E2=80=9C=E9=9A=8F=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=8A=98=E8=B4=B4=E7=9A=84=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E2=80=9D=E7=9B=B4=E6=8E=A5=E6=93=8D=E4=BD=9CNode=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0style=EF=BC=8C=E9=81=BF=E5=85=8D=E5=85=B6=E5=AE=83?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=91=E5=AE=9A=E9=80=BB=E8=BE=91=E5=BD=B1?=
 =?UTF-8?q?=E5=93=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scroll-fold-nav2/scroll-fold-nav2.uvue    | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue b/pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue
index 0b18da82..da49d4ad 100644
--- a/pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue
+++ b/pages/template/scroll-fold-nav2/scroll-fold-nav2.uvue
@@ -11,10 +11,8 @@
       </view>
     </scroll-view>
 
-    <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 ref="top-box" class="top-box" style="height:110px;background-color:rgba(255,255,255,0)">
+      <view ref="scroll-fold-nav" class="scroll-fold-nav">
         <view style="margin-left: 30px;">DCloud 为开发者而生</view>
       </view>
       <view @click="back" class="back" style="position: absolute;top:35px;left: 8px;">
@@ -39,16 +37,20 @@
       return {
         scrollTop: 0,
         searchWidth: 700,
-		searchNode: null as INode|null
+		searchNode: null as INode|null,
+		boxNode: null as INode|null,
+		navNode: null as INode|null
       }
     },
     methods: {
       onScroll(e : ScrollEvent) {
         let scrollTop = e.detail.scrollTop
-		this.searchNode?.style?.setProperty('width',700 - (scrollTop>40?40:scrollTop) +'rpx');
-		this.searchNode?.style?.setProperty('top',0 - (scrollTop>40?40:scrollTop) +'px');
+		this.boxNode?.style?.setProperty('height', (110 - (scrollTop>40?40:scrollTop) )+'px');
+		this.boxNode?.style?.setProperty('background-color', 'rgba(255, 255, 255, '+(scrollTop*3>100?100:scrollTop*3)/100+')');
+		this.navNode?.style?.setProperty('opacity', 1 - (scrollTop*3>100?100:scrollTop*3)/100.0);
+		this.searchNode?.style?.setProperty('width', 700 - (scrollTop>40?40:scrollTop) +'rpx');
+		this.searchNode?.style?.setProperty('top', 0 - (scrollTop>40?40:scrollTop) +'px');
 		this.scrollTop = scrollTop;
-		console.log('onScroll', e);
       },
       back(){
         // uni.navigateBack()  // 这么写用不了
@@ -81,6 +83,8 @@
     },
 	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>
-- 
GitLab