优化 模板示例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,120 +10,55 @@
         </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';
-  export default {
+<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
-      },
-      back(){
-        // uni.navigateBack()  // 这么写用不了
+        (this.$refs['header'] as ComponentPublicInstance).$data['scrollTop'] = 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)
-		  },
-		})
-        
-        // uni.switchTab({
-        //   url:'/pages/tabBar/template'
-        // })
-        
-      },
-      toSearchPage(){
-        uni.showToast({
-          title: '暂不支持',
-          icon: 'none'
-        });
+        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() {
-    }
+    onLoad() {}
   }
 </script>
 
 <style>
-  .page {
+  .page {
     flex: 1;
     background-color: #fbdf0d;
   }
 
   .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;
+    flex: 1;
   }
 </style>
\ No newline at end of file

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

@@ -11,106 +11,106 @@
       </view>
     </scroll-view>
 
-    <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;">
-        <image src="/static/template/scroll-fold-nav/back.png" style="width: 20px;" 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>
-          <text class="search-tip-text">请输入你要搜索的内容</text>
-        </view>
-        <text class="search-btn">搜索</text>
+    <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;">
+        <image src="/static/template/scroll-fold-nav/back.png" style="width: 20px;" 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>
+          <text class="search-tip-text">请输入你要搜索的内容</text>
+        </view>
+        <text class="search-btn">搜索</text>
       </view>
     </view>
 
   </view>
 </template>
 
-<script>
+<script>
   import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
   export default {
     data() {
       return {
         scrollTop: 0,
-        searchWidth: 700,
-		searchNode: null as INode|null,
-		boxNode: null as INode|null,
-		navNode: null as INode|null
+        searchWidth: 700,
+        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.scrollTop = scrollTop;
-      },
-      back(){
-        // uni.navigateBack()  // 这么写用不了
+        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.scrollTop = 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)
-		  },
-		})
-        
-        // uni.switchTab({
-        //   url:'/pages/tabBar/template'
-        // })
-        
-      },
-      toSearchPage(){
-        uni.showToast({
-          title: '暂不支持',
-          icon: 'none'
-        });
+        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)
+          },
+        })
+
+        // uni.switchTab({
+        //   url:'/pages/tabBar/template'
+        // })
+
+      },
+      toSearchPage() {
+        uni.showToast({
+          title: '暂不支持',
+          icon: 'none'
+        });
       }
     },
     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;
-	}
+    },
+    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>
 
 <style>
-  .page {
+  .page {
     flex: 1;
     background-color: #fbdf0d;
   }
 
   .scroll-view {
-    flex: 1;
+    flex: 1;
   }
 
   .top-box {
     position: fixed;
     top: 0;
     padding-top: 25px;
-    align-items: flex-end;
-    border-bottom: 1px solid #efefef;
+    align-items: flex-end;
+    border-bottom: 1px solid #efefef;
   }
 
   .scroll-fold-nav {
     height: 44px;
-    width: 750rpx;
-    justify-content: center;
+    width: 750rpx;
+    justify-content: center;
   }
 
   .search {
@@ -118,21 +118,23 @@
     border: 1px solid #fbdf0d;
     height: 35px;
     border-radius: 100px;
-    margin: 0 25rpx;
-    padding: 8px;
-    flex-direction: row;
-    align-items: center;
+    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;
+  }
+
+  .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