From 48e993dbba494d47bea733c1c45c9d62919c96db Mon Sep 17 00:00:00 2001
From: linju <linju@dcloud.io>
Date: Mon, 4 Sep 2023 15:23:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=20pull-zoom-image=20=E5=90=91=E4=B8=8A?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=97=B6=EF=BC=8C=E5=A4=B4=E9=83=A8=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E4=B8=8D=E7=BC=A9=E6=94=BE=EF=BC=8C=E8=B7=9F=E9=9A=8F?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E7=A7=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pull-zoom-image/pull-zoom-image.uvue      | 236 ++++++++++--------
 1 file changed, 125 insertions(+), 111 deletions(-)

diff --git a/pages/template/pull-zoom-image/pull-zoom-image.uvue b/pages/template/pull-zoom-image/pull-zoom-image.uvue
index 7d13eb20..2f690270 100644
--- a/pages/template/pull-zoom-image/pull-zoom-image.uvue
+++ b/pages/template/pull-zoom-image/pull-zoom-image.uvue
@@ -1,118 +1,137 @@
-<template>
-  <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 class="body" ref="body">
-      <view class="user-info">
-        <image class="user-avatar" src="../../../static/test-image/logo.png" mode="widthFix"></image>
-        <view class="font-box">
-          <text class="username">uni-app-x</text>
-          <text class="slogan">一次开发，多端覆盖</text>
-        </view>
-      </view>
-      <view class="content">
-        <view class="content-item">
-          <text class="text">
-            1. 当前示例监听了整个页面的touchstart、touchmove、touchend事件 ，实现监听拖动事件。
-          </text>
-        </view>
-        <view class="content-item">
-          <text class="text">
-            2. 在拖动事件，使用 ref 直接获取 ref="body" 元素的节点，通过节点的 setProperty 方法来修改 transform的translateY 的值（根据在Y轴方向拖动的距离），从而达到页面跟随手指上下拖动的效果。
-          </text>
-        </view>
-        <view class="content-item">
-          <text class="text">
-            3. 在拖动事件，使用 ref 直接获取 ref="head-img" 元素的节点，通过节点的 setProperty 方法来修改 transform的scale 的值（根据在Y轴方向拖动的距离），从而达到手指上下拖动时图片缩放的效果。
-          </text>
-        </view>
-        <view class="content-item">
-          <text class="text">
-            4. 在拖动完成事件，通过帧动画，设置上述两个元素回到原来的位置。
-          </text>
-        </view>
-        <view class="content-item">
-          <text class="text">
-            5. 请向上\向下拖动页面观察效果。
-          </text>
-        </view>
-
-
-        <!-- <view class="content-item" v-for="(item,index) in 6" :key="index">
-          <text class="text">content-{{item}}</text>
-        </view> -->
-      </view>
-    </view>
-  </view>
+<template>
+<view @click="back" class="nav-back">
+  <image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></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>
+      <view class="font-box">
+        <text class="username">uni-app-x</text>
+        <text class="slogan">一次开发，多端覆盖</text>
+      </view>
+    </view>
+    <view class="content">
+      <view class="content-item">
+        <text class="text">
+          1. 当前示例监听了整个页面的touchstart、touchmove、touchend事件 ，实现监听拖动事件。
+        </text>
+      </view>
+      <view class="content-item">
+        <text class="text">
+          2. 在拖动事件，使用 ref 直接获取 ref="body" 元素的节点，通过节点的 setProperty 方法来修改 transform的translateY 的值（根据在Y轴方向拖动的距离），从而达到页面跟随手指上下拖动的效果。
+        </text>
+      </view>
+      <view class="content-item">
+        <text class="text">
+          3. 在拖动事件，使用 ref 直接获取 ref="head-img" 元素的节点，通过节点的 setProperty 方法来修改 transform的scale 的值（根据在Y轴方向拖动的距离），从而达到手指上下拖动时图片缩放的效果。
+        </text>
+      </view>
+      <view class="content-item">
+        <text class="text">
+          4. 在拖动完成事件，通过帧动画，设置上述两个元素回到原来的位置。
+        </text>
+      </view>
+      <view class="content-item">
+        <text class="text">
+          5. 请向上\向下拖动页面观察效果。
+        </text>
+      </view>
+      <view class="content-item" v-for="(item,index) in 10" :key="index">
+        <text class="text">content-{{item}}</text>
+      </view>
+    </view>
+  </view>
+</view>
 </template>
 
 <script>
-  let sY : number = 0,
-    touchstartAfter : boolean = false;
+  let sY : number = 0,
+      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() {
-        this.setINodeStyle("head-img", 'transform', `scale(${(this.y > 0 ? this.y : 0) / 200 + 1})`)
+    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;
-        sY = e.touches[0].screenY;
-        this.doMove()
+        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
-          interval = setInterval(() => {
-            // 加速度
-            acceleration += 0.2
-
-            const dy = y - this.y
-            if (Math.abs(dy) < 1) {
-              this.y = y
-            } else {
-              this.y += dy / speed * acceleration
-            }
-            this.doMove()
-            if (this.y == y) {
-              clearInterval(interval)
-              callback()
-            }
-          }, 16)
+        function moveTo(y : number, callback : () => void, speed : number = 10) {
+          let interval : number = 0
+          let acceleration : number = 1
+          interval = setInterval(() => {
+            // 加速度
+            acceleration += 0.2
+
+            const dy = y - this.y
+            if (Math.abs(dy) < 1) {
+              this.y = y
+            } 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 || 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);
+          moveTo(bounceY, () => {
+            moveTo(0, () => {
+              // console.log('done');
+            }, 30)
+          })
         }
-        const bounceY = (this.y * -0.03).toInt()
-        console.log('bounceY', bounceY);
-        moveTo(bounceY, () => {
-          moveTo(0, () => {
-            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;
+    margin-top: -200px;
+    width: 750rpx;
   }
 
   .user-info {
@@ -191,28 +206,27 @@
   .content {
     background-color: #FFF;
     border-radius: 10px;
-    flex: 1;
-    padding: 15px;
+    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;
-- 
GitLab