小程序红包雨

最新推荐文章于 2022-11-27 23:42:09 发布

极乐叔

最新推荐文章于 2022-11-27 23:42:09 发布

阅读量2.7k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/rolan1993/article/details/81504420

版权

这篇博客介绍了如何实现小程序中的红包雨效果。作者honey缘木鱼是小程序社区的博主，分享了包含CSS、WXML和JS代码的实战开发教程。文章强调内容为原创，并提供了原文地址和相关语音口令红包的微信小程序Demo链接。

摘要由CSDN通过智能技术生成

效果图

//建立临时红包列表 var packetList = [];
 //建立临时红包图片数组 var srcList = ["../images/hogbao.png", "../images/hogbao2.png"];
 //生成初始化红包 for (var i = 0; i < that.data.packetNum; i++) {
 // 生成随机位置（水平位置） var left = Math.random() * that.data.windowWidth - 20;
 // 优化位置，防止红包越界现象，保证每个红包都在屏幕之内 if (left < 0) {
        left += 20;
      } else if (left > that.data.windowWidth) {
        left -= 20;
      }
 // 建立临时单个红包 var packet = {
 src: srcList[Math.ceil(Math.random() * 2) - 1],
 top: -30,
 left: left,
 speed: Math.random() * 2500 + 3000 //生成随机掉落时间，保证每个掉落时间保持在3秒到5.5秒之间      }
 // 将单个红包装入临时红包列表      packetList.push(packet);
 // 将生成的临时红包列表更新至页面数据，页面内进行渲染      that.setData({
 packetList: packetList
      })
    }

 // 初始化动画执行当前索引 var tempIndex = 0;
 // 开始定时器，每隔1秒掉落一次红包    that.data.showInter = setInterval(function () {
 // 生成当前掉落红包的个数，1-3个 var showNum = Math.ceil(Math.random() * 3);
 // 防止数组越界 if (tempIndex * showNum >= that.data.packetNum) {
 // 如果所有预生成的红包已经掉落完，清除定时器        clearInterval(that.data.showInter);
      } else {
 switch (s