uni-app 微信小程序之红包雨活动

文章目录

  • 1. 页面效果
  • 2. 页面样式代码

1. 页面效果

GIF录屏有点卡,实际比较丝滑

  1. 每0.5s掉落一个红包
  2. 控制4s后自动移除红包
  3. 点击红包消除红包(或者自行+1,或者弹窗需求)

请添加图片描述

2. 页面样式代码

<!-- 红包雨活动 -->
<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>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; // 红包数量// for (let i = 0; i < numRedEnvelopes; i++) {const redEnvelope = {id: Date.now(),top: 0, // 随机纵坐标left: Math.random() * (uni.getSystemInfoSync().windowWidth - 50), // 随机横坐标speed: Math.random() * 6 + 1, // 随机速度};this.redEnvelopes.push(redEnvelope);setTimeout(() => {this.redEnvelopes = this.redEnvelopes.filter(p => p.id !== redEnvelope.id);}, 4000); // 4秒后移除红包},startRedEnvelopeRain() {this.redEnvelopeInterval = setInterval(() => {this.moveRedEnvelopes();}, 1000 / 60); // 每秒60帧},stopRedEnvelopeRain() {clearInterval(this.redEnvelopeInterval);},moveRedEnvelopes() {this.redEnvelopes.forEach((redEnvelope, index) => {console.log(redEnvelope, "redEnvelopes")redEnvelope.top += redEnvelope.speed;if (redEnvelope.top > uni.getSystemInfoSync().windowHeight) {this.redEnvelopes = this.redEnvelopes.filter(p => p.id !== redEnvelope.id);}});},// 处理红包点击事件,可以增加分数或显示提示等操作handleRedEnvelopeClick(index) {// 例如:this.score += 1;// 或者:this.showTip = true;// 可以根据实际需求自行添加逻辑this.redEnvelopes.splice(index, 1); // 点击后移除红包},}}
</script><style lang="scss">.red-envelope-rain {position: relative;overflow: hidden;width: 100vw;height: 100vh;}.red-envelope {position: absolute;background-image: url('https://i-1.lanrentuku.com/2020/11/4/a9b4bcdb-75f3-429d-9c21-d83d945b088e.png?imageView2/2/w/500');background-size: 100rpx 100rpx;background-repeat: no-repeat;width: 100rpx;height: 100rpx;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/246344.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ultraleap 3Di示例Interactable Objects组件分析

该示例代码位置如下&#xff1a; 分析如下&#xff1a; Hover Enabled&#xff1a;悬停功能&#xff0c;手放在这个模型上&#xff0c;会触发我们手放在这个模型上的悬停功能。此时当手靠近模型的时候&#xff0c;手的模型的颜色会发生改变&#xff0c;反之&#xff0c;则不会…

防御保护----防火墙的安全策略、NAT策略实验

实验拓扑&#xff1a; 实验要求&#xff1a; 1.生产区在工作时间&#xff08;9&#xff1a;00-18&#xff1a;00&#xff09;内可以访问DMZ区&#xff0c;仅可以访问http服务器&#xff1b; 2.办公区全天可以访问DMZ区&#xff0c;其中10.0.2.10可以访问FTP服务器和HTTP服务器…

【C++】类和对象(中篇)(全网最细!!!)

文章目录 &#x1f354;一、类的六个默认成员函数&#x1f354;二、构造函数&#x1f35f;1、概念&#x1f35f;2、特性&#x1f369;默认构造函数 &#x1f354;三、析构函数&#x1f35f;1、概念&#x1f35f;2、特性&#x1f369;默认析构函数 &#x1f354;四、拷贝构造函数…

了解WPF控件:ToggleButton和Separator常用属性与用法(十三)

掌握WPF控件&#xff1a;熟练ToggleButton和Separator常用属性&#xff08;十三&#xff09; ToggleButton 一个按钮类UI元素&#xff0c;它的特点是拥有两种状态&#xff1a;选中&#xff08;Checked&#xff09;和未选中&#xff08;Unchecked&#xff09;。当用户单击Togg…

用ChatGPT写申请文书写进常春藤联盟?

一年前&#xff0c;ChatGPT 的发布引发了教育工作者的恐慌。现在&#xff0c;各大学正值大学申请季&#xff0c;担心学生会利用人工智能工具伪造入学论文。但是&#xff0c;聊天机器人创作的论文足以骗过大学招生顾问吗&#xff1f; ChatGPT简介 ChatGPT&#xff0c;全称聊天生…

Docker 容器内运行 mysqldump 命令来导出 MySQL 数据库,自动化备份

备份容器数据库命令&#xff1a; docker exec 容器名称或ID mysqldump -u用户名 -p密码 数据库名称 > 导出文件.sql请替换以下占位符&#xff1a; 容器名称或ID&#xff1a;您的 MySQL 容器的名称或ID。用户名&#xff1a;您的 MySQL 用户名。密码&#xff1a;您的 MySQL …

SpringMVC-对静态资源的访问

1.工程中加入静态资源 在webapp下创建static文件夹&#xff0c;此文件夹专门放入静态资源 2.使项目可以处理静态资源的请求 在SpringMVC配置文件中添加以下语句 1.引入命名空间 xmlns:mvc"http://www.springframework.org/schema/mvc" xsi:schemaLocation“http…

npm i 报一堆版本问题

1&#xff0c;先npm cache clean --force 再下载 插件后缀加上 --legacy-peer-deps 2&#xff0c; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz failed, reason…

Nginx编译安装以及负载均衡配置(Ubuntu 22.04)

目录 Nginx编译安装以及负载均衡配置 Ubuntu 22.04.1 LTS 编译安装 nginx-1.22.1 1.安装依赖包 2. 下载nginx 3. 编译安装 报错解决 解决问题2 4.安装 5启动Nginx&#xff1a; 负载均衡 负载均衡算法 轮询 加权负载均衡 ip_hash算法 算法进行配置演示 加权负载均衡 轮询 IP 哈希…

活动回顾丨云原生技术实践营上海站「云原生 AI 大数据」专场(附 PPT)

AI 势不可挡&#xff0c;“智算”赋能未来。2024 年 1 月 5 日&#xff0c;云原生技术实践营「云原生 AI &大数据」专场在上海落幕。活动聚焦容器、可观测、微服务产品技术领域&#xff0c;以云原生 AI 工程化落地为主要方向&#xff0c;希望帮助企业和开发者更快、更高效地…

驱动开发-系统移植

一、Linux系统移植概念 需要移植三部分东西&#xff0c;Uboot ,内核 &#xff0c;根文件系统 &#xff08;rootfs&#xff09; &#xff0c;这三个构成了一个完整的Linux系统。 把这三部分学明白&#xff0c;系统移植就懂点了。 二、Uboot uboot就是引导程序下载的一段代…

C# 设置一个定时器函数

C#中&#xff0c;创建设置一个定时器&#xff0c;能够定时中断执行特定操作&#xff0c;可以用于发送心跳、正计时和倒计时等。 本文对C#的定时器简单封装一下&#xff0c;哎&#xff0c;以方便定时器的创建。 定义 using Timer System.Timers.Timer;class SetTimer {Timer …

npm create vue3项目特别慢

问题&#xff1a;Vue CLI v5.0.8在配置了淘宝镜像的情况下&#xff0c;创建项目报Failed to check for updates&#xff0c;还特别慢&#xff0c;等了好久都创建不好 查看 npm config get registry更换npm镜像 npm config set registryhttps://registry.npmmirror.com这样创建…

RC4加密技术探究:优缺点与实战应用

引言 在网络安全领域&#xff0c;加密技术一直是保障数据安全的重要手段。Rivest Cipher 4&#xff08;简称RC4&#xff09;作为一种对称加密算法&#xff0c;自20世纪80年代以来广泛应用于各种网络安全协议中。本文将详细分析RC4加密算法的优缺点以及其在实际应用中解决的问题…

AI大模型开发架构设计(6)——AIGC时代,如何求职、转型与选择?

文章目录 AIGC时代&#xff0c;如何求职、转型与选择&#xff1f;1 新职场&#xff0c;普通人最值钱的能力是什么?2 新职场成长的3点建议第1点&#xff1a;目标感第2点&#xff1a;执行力第3点&#xff1a;高效生产力 3 新职场会产生哪些新岗位机会?如何借势?4 新职场普通人…

ERROR Failed to get response from https://registry.npm.taobao.org/ 错误的解决

这个问题最近才出现的。可能跟淘宝镜像的证书到期有关。 解决方式一&#xff1a;更新淘宝镜像&#xff08;本人测试无效&#xff0c;但建议尝试&#xff09; 虽然无效&#xff0c;但感觉是有很大关系的。还是设置一下比较好。 淘宝镜像的地址&#xff08;registry.npm.taobao…

《30天自制操作系统》 第一周(D1-D7) 笔记

前言&#xff1a;这是我2023年5月份做的一个小项目&#xff0c;最终是完成了整个OS。笔记的话&#xff0c;只记录了第一周。想完善&#xff0c;却扔在草稿箱里许久。最终决定&#xff0c;还是发出来存个档吧。 一、汇编语言 基础指令 MOV: move赋值&#xff0c;数据传送指令…

【重点】【DP】123.买卖股票的最佳时机III

题目 法1&#xff1a;单次遍历&#xff0c;Best! class Solution {public int maxProfit(int[] prices) {int f1 -prices[0], f2 0, f3 -prices[0], f4 0;for (int i 1; i < prices.length; i) {f1 Math.max(f1, -prices[i]);f2 Math.max(f2, f1 prices[i]);f3 Ma…

交叉导轨为何要保持日常清洁?

在工业自动化的发展中&#xff0c;交叉导轨因其具有精度高、高刚性、高耐磨性等特点&#xff0c;在数控技术的发展中得到了越来越多的使用&#xff0c;对于交叉导轨来说&#xff0c;保持日常清洁对其性能和寿命具有重要意义。 1、防止灰尘和杂质的侵入&#xff1a;交叉导轨在机…

保姆级教学:Java项目从0到1部署到云服务器

目录 1、明确内容 2、apt 2.1、apt 语法 2.2、常用命令 2.3、更新apt 3、安装JDK17 4、安装MySQL 4.1、安装 4.2、检查版本及安装位置 4.3、初始化MySQL配置⭐ 4.4、检查状态 4.5、配置远程访问⭐ 4.6、登录MySQL 4.7、测试数据库 4.8、设置权限与密码⭐ 5、安…