新增 示例项目 pull-zoom-image

pages.json

@@ -355,14 +355,14 @@
       }
     },
     {
-      "path" : "pages/CSS/display/flex",
-      "style" : {
+      "path": "pages/CSS/display/flex",
+      "style": {
         "navigationBarTitleText": "display:flex"
       }
     },
     {
-      "path" : "pages/CSS/display/none",
-      "style" : {
+      "path": "pages/CSS/display/none",
+      "style": {
         "navigationBarTitleText": "display:none"
       }
     },
@@ -834,6 +834,13 @@
       "style": {
         "navigationBarTitleText": "自定义下拉刷新的scroll-view属性示例"
       }
+    },
+    {
+      "path": "pages/template/pull-zoom-image/pull-zoom-image",
+      "style": {
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {
@@ -850,8 +857,7 @@
     "selectedColor": "#007AFF",
     "borderStyle": "black",
     "backgroundColor": "#F8F8F8",
-    "list": [
-      {
+    "list": [{
         "pagePath": "pages/tabBar/component",
         "iconPath": "static/component.png",
         "selectedIconPath": "static/componentHL.png",
@@ -880,12 +886,10 @@
   "condition": {
     //模式配置，仅开发期间生效
     "current": 0, //当前激活的模式(list 的索引项)
-    "list": [
-      {
+    "list": [{
       "name": "", //模式名称
       "path": "", //启动页面，必选
       "query": "" //启动参数，在页面的onLoad函数里面得到
-      }
-    ]
+    }]
   }
 }

pages/tabBar/template.uvue

@@ -115,7 +115,6 @@ export default {
           url: 'pull-zoom-image',
           name: '下拉缩放顶部封面图',
           open: false,
-          enable: false,
           pages: [] as Page[],
         },
         {

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

+<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>
+
+<script>
+  let sY : number = 0,
+    touchstartAfter : boolean = false;
+  export default {
+    data() {
+      return {
+        $nodeMap: new Map<string, INode>(),
+        y: 0 as number
+      }
+    },
+    methods: {
+      doMove() {
+        this.setINodeStyle("head-img", 'transform', `scale(${(this.y > 0 ? this.y : 0) / 200 + 1})`)
+        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()
+      },
+      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)
+        }
+        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 {
+        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);
+      },
+      back() {
+        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)
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .root {
+    flex: 1;
+  }
+
+  .head-img {
+    height: 350px;
+    width: 1000rpx;
+    margin-left: -125rpx;
+    margin-top: -50px;
+    background-color: #aab8d9;
+  }
+
+  .body {
+    flex: 1;
+    margin-top: -200px;
+  }
+
+  .user-info {
+    padding: 15px;
+    flex-direction: row;
+  }
+
+  .user-avatar {
+    width: 150rpx;
+    height: 150rpx;
+    border-radius: 100px;
+    border: 3px solid #FFF;
+  }
+
+  .font-box {
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 10px;
+  }
+
+  .username {
+    font-size: 26px;
+    color: #FFF;
+  }
+
+  .slogan {
+    font-size: 16px;
+    color: #FFF;
+  }
+
+  .content {
+    background-color: #FFF;
+    border-radius: 10px;
+    flex: 1;
+    padding: 15px;
+  }
+
+  .content-item {
+    padding: 10px;
+    margin-bottom: 2px;
+    background-color: #fff;
+    border-radius: 5px;
+    border: 1px solid rgba(220, 220, 220, 0.1);
+  }
+
+  .text {
+    font-size: 12px;
+    color: #666;
+    line-height: 20px;
+  }
+
+  .nav-back {
+    position: absolute;
+    top: 20px;
+    left: 8px;
+    background-color: rgba(220, 220, 220, 0.3);
+    border-radius: 100px;
+    width: 28px;
+    height: 28px;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+  }
+
+  .nav-back .back-img {
+    width: 18px;
+    height: 18px;
+  }
+</style>