更新 示例项目 pull-zoom-image 向上滚动时，头部图片不缩放，跟随内容移动

pages/template/pull-zoom-image/pull-zoom-image.uvue

 <template>
-  <view @click="back" class="nav-back">
+<view @click="back" class="nav-back">
   <image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
-  </view>
-  <view class="root" @touchstart="touchstart($event as TouchEvent)" @touchmove="touchmove($event as TouchEvent)"
-    @touchend="touchend" @touchcancel="touchend">
-    <image class="head-img" ref="head-img" src="../../../static/template/pull-zoom-image/head-img.jpg"
-      mode="scaleToFill"></image>
+</view>
+<view style="flex:1" @touchstart="touchstart($event as TouchEvent)" @touchmove="touchmove($event as TouchEvent)" @touchend="touchend" @touchcancel="touchend">
+  <image class="head-img" ref="head-img" src="../../../static/template/pull-zoom-image/head-img.jpg" mode="scaleToFill"></image>
   <view class="body" ref="body">
     <view class="user-info">
       <image class="user-avatar" src="../../../static/test-image/logo.png" mode="widthFix"></image>
@@ -40,52 +38,54 @@
           5. 请向上\向下拖动页面观察效果。
         </text>
       </view>
-
-
-        <!-- <view class="content-item" v-for="(item,index) in 6" :key="index">
+      <view class="content-item" v-for="(item,index) in 10" :key="index">
         <text class="text">content-{{item}}</text>
-        </view> -->
       </view>
     </view>
   </view>
+</view>
 </template>
 
 <script>
   let sY : number = 0,
-    touchstartAfter : boolean = false;
+      dY : number = 0,
+      maxScrollTop:number = 0;
   export default {
     data() {
       return {
         $nodeMap: new Map<string, INode>(),
-        y: 0 as number
+        y: 0 as number,
+        scrollTop:0 as number
+      }
+    },
+    onReady() {
+      uni.getSystemInfo({
+        success: (e) => {
+          maxScrollTop = 1425 - e.screenHeight
         }
+      })
     },
     methods: {
       doMove() {
+        // console.log('doMove',this.y);
+        if(this.y > 0){
           this.setINodeStyle("head-img", 'transform', `scale(${(this.y > 0 ? this.y : 0) / 200 + 1})`)
+        }else{
+          this.setINodeStyle("head-img", 'transform', `translateY(${this.y})`)
+        }
         this.setINodeStyle("body", 'transform', `translateY(${this.y})`)
       },
       touchstart(e : TouchEvent) {
-        // console.log('touchstart')
-        if (this.y !== 0) {
-          return
-        }
         sY = e.touches[0].screenY;
-        touchstartAfter = true
       },
       touchmove(e : TouchEvent) {
-        // console.log('touchmove')
-        if (!touchstartAfter) {
-          return
-        }
         this.y += e.touches[0].screenY - sY;
+        dY = e.touches[0].screenY - sY
         sY = e.touches[0].screenY;
         this.doMove()
       },
       touchend() {
         // console.log('touchend')
-        touchstartAfter = false
-
         function moveTo(y : number, callback : () => void, speed : number = 10) {
           let interval : number = 0
           let acceleration : number = 1
@@ -99,20 +99,39 @@
             } else {
               this.y += dy / speed * acceleration
             }
+
+            // 滚动边界限制
+            if(this.y < maxScrollTop*-1){
+              this.y = maxScrollTop*-1
+            }
+            if(this.y > 0){
+              this.y = 0
+            }
+
+            // console.log('this.y',this.y);
+
             this.doMove()
-            if (this.y == y) {
+            if (this.y == y || this.y == maxScrollTop*-1 || this.y == 0) {
               clearInterval(interval)
               callback()
             }
           }, 16)
         }
+        // console.log('dY',dY);
+        if(this.y < 0){
+          // console.log(dY);
+          moveTo(this.y + dY * 20, () => {
+            // console.log('done');
+          },5)
+        }else{
           const bounceY = (this.y * -0.03).toInt()
-        console.log('bounceY', bounceY);
+          // console.log('bounceY', bounceY);
           moveTo(bounceY, () => {
             moveTo(0, () => {
-            console.log('done');
+              // console.log('done');
             }, 30)
           })
+        }
       },
       // 工具方法，用于快速设置 INode 的 style
       setINodeStyle(refName : string, propertyName : string, propertyStyle : any) : void {
@@ -143,21 +162,17 @@
 </script>
 
 <style>
-  .root {
-    flex: 1;
-  }
-
   .head-img {
     height: 350px;
-    width: 1000rpx;
+    /* width: 1000rpx; */
     margin-left: -125rpx;
     margin-top: -50px;
     background-color: #aab8d9;
   }
 
   .body {
-    flex: 1;
     margin-top: -200px;
+    width: 750rpx;
   }
 
   .user-info {
@@ -191,28 +206,27 @@
   .content {
     background-color: #FFF;
     border-radius: 10px;
-    flex: 1;
     padding: 15px;
   }
 
   .content-item {
-    padding: 10px;
-    margin-bottom: 2px;
+    padding: 15px;
+    margin-bottom: 16px;
     background-color: #fff;
     border-radius: 5px;
-    border: 1px solid rgba(220, 220, 220, 0.1);
+    border: 1px solid rgba(220, 220, 220, 0.5);
   }
 
   .text {
-    font-size: 12px;
+    font-size: 14px;
     color: #666;
     line-height: 20px;
   }
 
   .nav-back {
     position: absolute;
-    top: 20px;
-    left: 8px;
+    top: 30px;
+    left: 10px;
     background-color: rgba(220, 220, 220, 0.3);
     border-radius: 100px;
     width: 28px;