pull-zoom-image.uvue

<template>
  <view @click="back" class="nav-back">
    <image class="back-img" src="/static/template/pull-zoom-image/back.png" mode="widthFix"></image>
  </view>
  <scroll-view :scroll-y="true" style="flex:1;" :refresher-enabled="true"
    refresher-default-style="none" @refresherpulling="onRefresherpulling"
    :refresher-threshold="300" :refresher-max-drag-distance="299"
    @scroll="onScroll" :rebound="false"
    >
    <view class="head-img-box-2" ref="head-img-box-2">
      <image class="img" ref="head-img-2" src="../../../static/template/pull-zoom-image/head-img.jpg" mode="scaleToFill"></image>
    </view>
    <view class="user-info" ref="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-box">
      <view class="item" v-for="(item,index) in 30" :key="index">
        <text class="text">{{item}}. 占位</text>
      </view>
    </view>

    <view slot="refresher">
      <view class="head-img-box-1">
        <image class="img" ref="head-img-1" src="../../../static/template/pull-zoom-image/head-img.jpg" mode="scaleToFill"></image>
      </view>
    </view>

  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        $INodeMap: new Map<string, INode>()
      }
    },
    methods: {
      onScroll(e : ScrollEvent) {
        const {scrollTop} = e.detail
        let y : number = scrollTop - 110
        let s : number = (100 - scrollTop/3)/100
        if(y < 0){
          y = 0
        }
        if(s < 0.7){
          s = 0.7
        }
        let x : number = (1 - s) * -100
        this.setINodeStyle("user-info", "transform", `translate(${x},${y + (s-1)* -50}px) scale(${s})`)
        this.setINodeStyle("head-img-box-2", "transform", `translateY(${y}px)`)
      },
      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})`)
      },
      // 工具方法，用于快速设置 INode 的 style
      setINodeStyle(refName : string, propertyName : string, propertyStyle : any) : void {
        let iNode : INode | null = this.$INodeMap.get(refName)
        if (iNode == null) {
          iNode = this.$refs.get(refName) as INode;
          this.$INodeMap.set(refName, iNode)
        }
        iNode.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-box-1,
  .head-img-box-2
  {
    position: relative;
    height: 300px;
  }

  .head-img-box-1 .img,
  .head-img-box-2 .img
  {
    position: absolute;
    left: -125rpx;
    width: 1000rpx;
    height: 600px;
  }

  .head-img-box-1 .img {
    top: 0;
  }

  .head-img-box-2 .img {
    bottom: -100;
  }

  .head-img-box-2 {
    z-index: 9;
    height: 200px;
  }

  .user-info{
    margin-top: -110px;
    width: 750rpx;
    padding: 15px;
    flex-direction: row;
    z-index: 10;
  }

  .user-info .user-avatar {
    width: 150rpx;
    height: 150rpx;
    border-radius: 100px;
    border: 3px solid #FFF;
  }

  .user-info .font-box {
    flex-direction: column;
    justify-content: space-around;
    padding: 10px;
  }

  .user-info .username {
    font-size: 26px;
    color: #FFF;
  }

  .user-info .slogan {
    font-size: 16px;
    color: #FFF;
  }


  .list-box {
    background-color: #FFF;
    z-index: 1;
  }

  .list-box .item {
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid rgba(220, 220, 220, 0.3);
  }

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

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