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>
  <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>
  export default {
    data() {
      return {
        $INodeMap: new Map<string, INode>(),

        refresherTriggered: false,
      }
    },
    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})`)
      },
      onRefresherrefresh() {
        this.refresherTriggered = true
        //拖动结束
        setTimeout(() => {
          this.refresherTriggered = false
        }, 0)
      },
      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 iNode = this.getINodeByRefName(refName)
        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 {
    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;
    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;
  }

  .list-item {
    background-color: #FFF;
    padding-top: 15px;
  }
  .last-list-item{
    padding-bottom: 15px;
  }

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

  .item-content-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>