uniapp红包雨活动

最新推荐文章于 2024-11-13 17:17:27 发布

周亚鑫

最新推荐文章于 2024-11-13 17:17:27 发布

阅读量295

点赞数 7

CC 4.0 BY-SA版权

分类专栏： uni-app JavaScript 微信小程序文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/q4717529/article/details/135904497

`uniapp红包雨活动`

`template`

<template>
	<scroll-view scroll-y="true">
		<view class="red-envelope-rain">
			<view v-for="(redEnvelope, index) in redEnvelopes" :key="index" class="red-envelope"
				:style="{ top: redEnvelope.top + 'px', left: redEnvelope.left + 'px' }"
				@click="handleRedEnvelopeClick(index)"></view>
		</view>
	</scroll-view>
</template>

`script`

<script>
	export default {
		data() {
			return {
				redEnvelopes: [],
				redEnvelopeInterval: null,
			}
		},
		onLoad(options) {
			// 每秒创建一个红包
			setInterval(this.initializeRedEnvelopes, 500); 
			// 更新红包位置，约 60 帧
			setInterval(this.moveRedEnvelopes, 1000 / 60); 
		},
		beforeDestroy() {
			this.stopRedEnvelopeRain();
		},
		methods: {
			initializeRedEnvelopes() {
				const numRedEnvelopes = 20; // 红包数量