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 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>

<script>
  let sY : number = 0,
      dY : number = 0,
      maxScrollTop:number = 0,
      moveIng:boolean = false,
      startMoveTime:number = 0;
  export default {
    data() {
      return {
        $nodeMap: new Map<string, INode>(),
        y: 0 as number,
        scrollTop:0 as number
      }
    },
    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
      },
      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()
        }
      },
      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
          })
        }
      },
      // 工具方法，用于快速设置 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>
  .head-img {
    height: 350px;
    /* width: 1000rpx; */
    margin-left: -125rpx;
    margin-top: -50px;
    background-color: #aab8d9;
  }

  .body {
    margin-top: -200px;
    width: 750rpx;
  }

  .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;
    padding: 15px;
  }

  .content-item {
    padding: 5px;
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid rgba(220, 220, 220, 0.5);
  }

  .text {
    font-size: 14px;
    color: #666;
    line-height: 20px;
  }

  .nav-back {
    position: absolute;
    top: 30px;
    left: 10px;
    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>