优化 模板示例scroll-fold-nav的性能

把头部区域封装成一个组件，在滚动时，直接修改该组件的data里边的scrollTop，这样可以将每次滚动触发的变化范围限定到该组件内

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

+<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;
+  }
+
+  .scroll-fold-nav {
+    height: 44px;
+    width: 750rpx;
+    justify-content: center;
+  }
+
+  .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-tip-text {
+    font-size: 12px;
+    color: #666;
+  }
+
+  .search-btn {
+    font-size: 12px;
+    background-color: #ff6900;
+    color: #FFF;
+    padding: 5px 8px;
+    border-radius: 100px;
+  }
+</style>

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

@@ -10,45 +10,23 @@
         </view>
       </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 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':searchWidth - (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>
-
+    <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 {
-        scrollTop: 0,
-        searchWidth: 700
-      }
+      return {}
     },
     methods: {
       onScroll(e : ScrollEvent) {
-        this.scrollTop = e.detail.scrollTop
+        (this.$refs['header'] as ComponentPublicInstance).$data['scrollTop'] = e.detail.scrollTop
       },
-      back(){
+      back() {
         // uni.navigateBack()  // 这么写用不了
         // 这么写可以用
         uni.navigateBack({
@@ -62,21 +40,15 @@
             console.log('navigateBack complete', result.errMsg)
           },
         })
-        
-        // uni.switchTab({
-        //   url:'/pages/tabBar/template'
-        // })
-        
       },
-      toSearchPage(){
+      toSearchPage() {
         uni.showToast({
           title: '暂不支持',
           icon: 'none'
         });
       }
     },
-    onLoad() {
-    }
+    onLoad() {}
   }
 </script>
 
@@ -89,41 +61,4 @@
   .scroll-view {
     flex: 1;
   }
-
-  .top-box {
-    position: fixed;
-    top: 0;
-    padding-top: 25px;
-    align-items: flex-end;
-    border-bottom: 1px solid #efefef;
-  }
-
-  .scroll-fold-nav {
-    height: 44px;
-    width: 750rpx;
-    justify-content: center;
-  }
-
-  .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-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

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

@@ -37,22 +37,22 @@
       return {
         scrollTop: 0,
         searchWidth: 700,
-		searchNode: null as INode|null,
-		boxNode: null as INode|null,
-		navNode: 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.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.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;
       },
-      back(){
+      back() {
         // uni.navigateBack()  // 这么写用不了
         // 这么写可以用
         uni.navigateBack({
@@ -72,7 +72,7 @@
         // })
 
       },
-      toSearchPage(){
+      toSearchPage() {
         uni.showToast({
           title: '暂不支持',
           icon: 'none'
@@ -124,10 +124,12 @@
     align-items: center;
     justify-content: space-between;
   }
+
   .search-tip-text {
     font-size: 12px;
     color: #666;
   }
+
   .search-btn {
     font-size: 12px;
     background-color: #ff6900;