From 9fdec58e2dc542b3a026112aa1487bab16cc8480 Mon Sep 17 00:00:00 2001
From: linju <linju@dcloud.io>
Date: Thu, 7 Sep 2023 20:49:56 +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=E6=94=B9=E7=94=A8?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=8B=E6=8B=89=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pull-zoom-image/pull-zoom-image.uvue      | 249 ++++++------------
 1 file changed, 87 insertions(+), 162 deletions(-)

diff --git a/pages/template/pull-zoom-image/pull-zoom-image.uvue b/pages/template/pull-zoom-image/pull-zoom-image.uvue
index 6e825697..7cc3b98e 100644
--- a/pages/template/pull-zoom-image/pull-zoom-image.uvue
+++ b/pages/template/pull-zoom-image/pull-zoom-image.uvue
@@ -1,164 +1,72 @@
-<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 15" :key="index">
-        <text class="text" style="padding-left: 4px;">{{item + 5}}. 占位</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>
+  <scroll-view :scroll-y="true" style="flex:1;" :refresher-enabled="true"
+    :refresher-triggered="refresherTriggered" refresher-default-style="none" @refresherpulling="onRefresherpulling"
+    @refresherrefresh="onRefresherrefresh" :refresher-threshold="300">
+
+    <view class="head-img-box">
+      <image class="head-img-2" ref="head-img-2" src="../../../static/template/pull-zoom-image/head-img.jpg" mode="scaleToFill"></image>
+    </view>
+    <view class="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="list-item" v-for="(item,index) in 30" :key="index" :class="{'last-list-item':index == 29}">
+        <view class="item-content">
+          <text class="item-content-text" style="padding-left: 4px;">{{item}}. 占位</text>
+        </view>
+      </view>
+    </view>
+
+    <view slot="refresher">
+      <view class="head-img-box">
+        <image class="head-img-1" ref="head-img-1" src="../../../static/template/pull-zoom-image/head-img.jpg" mode="scaleToFill"></image>
+      </view>
+    </view>
+  </scroll-view>
 </template>
 
-<script>
-  let sY : number = 0,
-      dY : number = 0,
-      maxScrollTop:number = 0,
-      moveIng:boolean = false,
-      startMoveTime:number = 0;
+<script>
   export default {
     data() {
       return {
-        $nodeMap: new Map<string, INode>(),
-        y: 0 as number,
-        scrollTop:0 as number
+        $INodeMap: new Map<string, INode>(),
+
+        refresherTriggered: false,
       }
-    },
-    onReady() {
-      uni.getSystemInfo({
-        success: (e) => {
-          maxScrollTop = 683 - 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) {
-        sY = e.touches[0].screenY;
-        //计时
-        startMoveTime = 0
+    methods: {
+      onRefresherpulling(e : RefresherEvent) {
+        // console.log('onRefresherpulling',e.detail.dy)
+        let pullingDistance:number = e.detail.dy
+        this.setINodeStyle("head-img-1", 'transform', `scale(${pullingDistance / 200 + 1})`)
+        this.setINodeStyle("head-img-2", 'transform', `scale(${pullingDistance / 200 + 1})`)
       },
-      touchmove(e : TouchEvent) {
-        this.y += e.touches[0].screenY - sY;
-        dY = e.touches[0].screenY - sY
-        sY = e.touches[0].screenY;
-        // 限制滚动到底后上拉
-        if(this.y < maxScrollTop*-1){
-          this.y = maxScrollTop*-1
-        }
-        this.doMove()
-        //计时
-        if(startMoveTime === 0){
-          startMoveTime = Date.now()
-        }
+      onRefresherrefresh() {
+        this.refresherTriggered = true
+        //拖动结束
+        setTimeout(() => {
+          this.refresherTriggered = false
+        }, 0)
       },
-      touchend() {
-        // console.log('touchend')
-        if(moveIng){
-          return
-        }
-        moveIng = true
-        function moveTo(y : number, callback : () => void, speed : number = 10,acceleration : number = 0.2) {
-          let interval : number = 0
-          let _acceleration : number = 1
-          interval = setInterval(() => {
-            // 加速度
-            _acceleration += acceleration
-
-            const dy = y - this.y
-            if (Math.abs(dy) < 3) {
-              this.y = y
-            } else {
-              this.y += dy / speed * _acceleration
-            }
-
-            this.doMove()
-            if (this.y == y || this.y == maxScrollTop*-1 || this.y == 0) {
-              clearInterval(interval)
-              callback()
-            }
-          }, 16)
-        }
-        // console.log('dY',dY);
-        // console.log('this.y',this.y);
-        if(this.y < 0){
-          let speed:number = dY/(Date.now() - startMoveTime) * 1000
-          let inertia = speed * 3
-          if( Math.abs(inertia) < 100 ){
-            inertia = inertia > 0 ? 100 : -100;
-          }
-          let endY = this.y + inertia
-          // 滚动边界限制
-          if(endY < maxScrollTop*-1){
-            endY = maxScrollTop*-1
-          }
-          if(endY > 0){
-            endY = 0
-          }
-          // console.log('endY',endY);
-          moveTo(endY, () => {
-            moveIng = false
-          },10,0.1)
-        }else{
-          moveTo(0, () => {
-            moveIng = false
-          })
+      getINodeByRefName(refName : string) : INode {
+        let iNode : INode | null = this.$INodeMap.get(refName)
+        if (iNode == null) {
+          iNode = this.$refs.get(refName) as INode;
+          this.$INodeMap.set(refName, iNode)
         }
+        return iNode
       },
       // 工具方法，用于快速设置 INode 的 style
       setINodeStyle(refName : string, propertyName : string, propertyStyle : any) : void {
-        let node : INode | null = this.$nodeMap.get(refName)
-        if (node == null) {
-          node = this.$refs.get(refName) as INode;
-          this.$nodeMap.set(refName, node)
-        } else {
-          // console.log('直接拿');
-        }
-        node?.style?.setProperty(propertyName, propertyStyle);
+        let iNode = this.getINodeByRefName(refName)
+        iNode?.style?.setProperty(propertyName, propertyStyle);
       },
       back() {
         uni.navigateBack({
@@ -178,16 +86,25 @@
 </script>
 
 <style>
-  .head-img {
-    height: 350px;
-    /* width: 1000rpx; */
-    margin-left: -125rpx;
-    margin-top: -50px;
-    background-color: #aab8d9;
+  .head-img-box {
+    position: relative;
+    height: 300px;
+  }
+  .head-img-1,.head-img-2{
+    position: absolute;
+    left: -125rpx;
+    width: 1000rpx;
+    height: 600px;
+  }
+  .head-img-1 {
+    top: 0;
+  }
+  .head-img-2 {
+    bottom: 0;
   }
 
   .body {
-    margin-top: -200px;
+    margin-top: -200px;
     width: 750rpx;
   }
 
@@ -222,18 +139,26 @@
   .content {
     background-color: #FFF;
     border-radius: 10px;
-    padding: 15px;
+    padding: 15px;
+  }
+
+  .list-item {
+    background-color: #FFF;
+    padding-top: 15px;
+  }
+  .last-list-item{
+    padding-bottom: 15px;
   }
 
-  .content-item {
-    padding: 5px;
-    margin-bottom: 16px;
+  .item-content {
     background-color: #fff;
+    margin: 0 5px;
+    padding: 10px;
     border-radius: 5px;
-    border: 1px solid rgba(220, 220, 220, 0.5);
-  }
+    border: 1px solid rgba(220, 220, 220, 0.3);
+  }
 
-  .text {
+  .item-content-text {
     font-size: 14px;
     color: #666;
     line-height: 20px;
-- 
GitLab