uniapp 顶部通知 上滑隐藏

<template>
  <view
    v-if="visible"
    class="top-notice-wrapper"
    :style="{ opacity: opacity, transform: `translateY(${translateY}px)` }"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <text class="notice-text">{{ message }}</text>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const message = ref('这是顶部通知消息')
const opacity = ref(0)
const translateY = ref(-50)
const visible = ref(true) 

let startY = 0
const maxHideDistance = 50

onMounted(() => {
  setTimeout(() => {
    opacity.value = 1
    translateY.value = 0
  }, 50)
})

const handleTouchStart = (e: UniApp.TouchEvent) => {
  startY = e.touches[0].clientY
}

const handleTouchMove = (e: UniApp.TouchEvent) => {
  const currentY = e.touches[0].clientY
  let deltaY = currentY - startY

  if (deltaY < 0) {
    deltaY = Math.abs(deltaY)
    if (deltaY > maxHideDistance) deltaY = maxHideDistance

    translateY.value = -deltaY
    opacity.value = 1 - deltaY / maxHideDistance
  }
}

const handleTouchEnd = () => {
  if (translateY.value <= -maxHideDistance * 0.5) {
    opacity.value = 0
    translateY.value = -maxHideDistance
    setTimeout(() => {
      visible.value = false
    }, 300)
  } else {
    opacity.value = 1
    translateY.value = 0
  }
}
</script>

<style lang="scss" scoped>
.top-notice-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffd700;
  padding: 50rpx;
  text-align: center;
  z-index: 1000;
  transition: opacity 0.4s ease, transform 0.3s ease;
  font-size: 28rpx;
}

.notice-text {
  color: #000;
}
</style>