优化“随滚动折叠的导航栏”对状态栏的适配

pages/template/scroll-fold-nav/scroll-fold-nav.uvue

 <template>
-  <view class="page">
   <scroll-view :scroll-y="true" @scroll="onScroll" class="scroll-view" rebound="false">
-			<view class="height-seat" style="height: 110px;">
+    <view class="height-seat" style="height: 125px;">
       <!-- 垫高专用 -->
     </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">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">
       <view ref="scroll-fold-nav" class="scroll-fold-nav">
@@ -32,13 +31,14 @@
       </view>
     </view>
 
-  </view>
+  </scroll-view>
 </template>
 
 <script>
   export default {
     data() {
       return {
+        statusBarHeight: 35,
         scrollTop: 0,
         searchWidth: 700,
         searchNode: null as INode | null,
@@ -46,8 +46,9 @@
         navNode: null as INode | null
       }
     },
-		onLoad() {},
+    onLoad() { },
     onReady() {
+      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight ?? 35;
       this.searchNode = this.$refs['search'] as INode;
       this.boxNode = this.$refs['top-box'] as INode;
       this.navNode = this.$refs['scroll-fold-nav'] as INode;
@@ -55,7 +56,7 @@
     methods: {
       onScroll(e : ScrollEvent) {
         let scrollTop = e.detail.scrollTop
-        this.boxNode?.style?.setProperty('height', (110 - (scrollTop > 40 ? 40 : scrollTop)) + 'px');
+        this.boxNode?.style?.setProperty('height', (125 - (scrollTop > this.statusBarHeight ? this.statusBarHeight : scrollTop)) + 'px');
         this.boxNode?.style?.setProperty('backgroundColor', 'rgba(255, 255, 255, ' + (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100.0 + ')');
         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');
@@ -107,17 +108,19 @@
     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;
@@ -127,11 +130,12 @@
   .top-box {
     position: fixed;
     top: 0;
-    padding-top: 25px;
+    padding-top: 35px;
     align-items: flex-end;
     border-bottom: 1px solid #efefef;
-		height:110px;
-		background-color:rgba(255,255,255,0)
+    height: 125px;
+    background-color: rgba(255, 255, 255, 0);
+    background-color: aliceblue;
   }
 
   .scroll-fold-nav {
@@ -146,7 +150,7 @@
 
   .nav-back {
     position: absolute;
-		top: 35px;
+    top: 44px;
     left: 8px;
   }
 
@@ -165,8 +169,8 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-		width:700rpx;
-		top:0px
+    width: 700rpx;
+    top: 0px;
   }
 
   .search-inner {