usky-web-mobile/src/components/oa-transForm/index.vue

<template>
  <view
    class="content-section"
    :style="[
      {
        transform: coverTransform,
        transition: coverTransition,
      },
    ]"
    @touchstart="coverTouchstart"
    @touchmove="coverTouchmove"
    @touchend="coverTouchend"
  >
    <image class="mine-image" src="@/static/images/mine/arc.png"></image>
    <slot name="content"></slot>
  </view>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, watchEffect, toRefs } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  coverTransform: "translateY(0px)",
  coverTransition: "0s",
  moving: false,
});

const { coverTransform, coverTransition, moving } = toRefs(state);

let startY = 0,
  moveY = 0,
  pageAtTop = true;

/**
 * @触摸开始
 */
function coverTouchstart(e) {
  if (pageAtTop === false) {
    return;
  }
  coverTransition.value = "transform .1s linear";
  startY = e.touches[0].clientY;
}

/**
 * @触摸移动
 */
function coverTouchmove(e) {
  moveY = e.touches[0].clientY;
  let moveDistance = moveY - startY;
  if (moveDistance < 0) {
    moving.value = false;
    return;
  }
  moving.value = true;
  if (moveDistance >= 80 && moveDistance < 100) {
    moveDistance = 80;
  }
  if (moveDistance > 0 && moveDistance <= 80) {
    coverTransform.value = `translateY(${moveDistance}px)`;
  }
}

/**
 * @触摸结束
 */
function coverTouchend() {
  if (moving.value === false) {
    return;
  }
  moving.value = false;
  coverTransition.value = "transform 0.3s cubic-bezier(.21,1.93,.53,.64)";
  coverTransform.value = "translateY(0px)";
}

onLoad((option) => {});
</script>
<style lang="scss" scoped>
.content-section {
  position: relative;
  margin-top: -85px;
  padding-bottom: 50.67px;
  background-color: #f5f6f7;

  .mine-image {
    position: absolute;
    left: 0;
    top: -16px;
    width: 100%;
    height: 18px;
  }

  .mine-actions {
    margin: 0.625rem 0.625rem;
    padding: 20px 0px;
    border-radius: 8px;
    background-color: white;

    .action-item {
      .icon {
        font-size: 28px;
      }

      .text {
        display: block;
        font-size: 13px;
        margin: 8px 0px;
      }
    }
  }
}
</style>