uniapp(vue3版)实现app内消息提醒，类似于美团那种app推送，兼容H5与app

黑豆1024

已于 2025-04-02 16:35:46 修改

阅读量942

点赞数 15

文章标签： uni-app javascript 前端

于 2025-04-01 16:01:06 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45970524/article/details/146915173

版权

效果图示例：

在这里插入图片描述

功能描述：

向上拖动不到弹窗的一半保持不变
向上拖动超过弹窗的一半隐藏
不拖动，n秒后自动消失

组件：

<template>
	<view class="box" v-if="data.show" :style="{ top: data.top + 'px' }">
		<view
			:class="'message ' + (data.ismsg === 'start' ? 'open' : data.ismsg === 'end' ? 'close' : data.ismsg === 'timeout' ? 'timeout': '')"
			@touchstart.stop.prevent="handleTouchStart" @touchmove.stop="handleTouchMove"
			@touchend.stop.prevent="handleTouchEnd" :style="{ transform: `translate(0px, ${data.translateY}px)` }">
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
      reactive } from "vue"
	const handleTouchStart = (event) => {
     
		data.isModalStart = true
		data.translateY = event.target.offsetTop;
		data.tranY = event.changedTouches[0].pageY
	}
	const handleTouchMove = (event) => {
     
		// 如果向下拖动
		if (data.tranY - event.changedTouches[0].pageY <= 0) {
     
			return