uniapp 商城小程序实现几分钟前xxx已购买此商品提示

1.思路

控制它的出现和消失并给出相应的动画效果，下面是模拟

2.代码

<template>
	<view>
		<view class="top-order" :class="showOrder ? 'on': 'hide'">
			<text>最新订单来自于{{randNumber}}分钟之前</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				showOrder: false,
				orderTimer: null,
				randNumber: 3,
			};
		},
		created() {
			this.startOrderTimer()
		},
		methods: {
			// 启动定时器，间隔获取位置
			startOrderTimer() {
				if (!this.locationTimer) {
					this.locationTimer = setInterval(() => {
						let min = Math.ceil(1)
						let max = Math.floor(20)
						this.randNumber = Math.floor(Math.random() * (max - min + 1)) + min
						this.showOrder = !this.showOrder
					}, 5000); // 每5秒获取一次位置  
				}
			},
			
		}
	}
</script>

<style lang="scss">
    //给一个初始位置
	.top-order {
		position: fixed;
		top: 200rpx;
		left: 100rpx;
		color: #fff;
		opacity: 0;
		background-color: #00000090;
		z-index: 10;
		padding: 10rpx 20rpx;
		border-radius: 25px;
	}
//消失的动画
	.hide {
		
		animation: pinyis 0.8s ease 0s;
	}
//出现的动画
	.on {
		
		opacity: 1;
		animation: pingyi 0.8s ease 0s;
	}
//出现

	@keyframes pingyi {
		0% {
			transform: translateY(50rpx);
		}

		100% {
			transform: translateY(0rpx);
		}
	}
//消失
	@keyframes pinyis {
		0% {
			/* 起始状态，元素在原位，不透明 */
			transform: translateY(0);
			opacity: 1;
		}

		100% {
			/* 结束状态，元素向上平移一段距离，并完全透明 */
			transform: translateY(-100rpx);
			/* 根据需要调整平移距离 */
			opacity: 0;
		}
	}
</style>