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>