介绍 & lt; view 天气:为=皗{packetList}},,天气:对于指数=癷ndex",天气:项=癷tems"比;
,& lt; image 类=癶ttps://www.yisu.com/zixun/red-packet", src=" {{items.src}} "> .red-packet {
,宽度:20 px;
25,身高:px;
,z - index: 100;
,转换属性:变换,上;
,transform-origin: 50%, 50%, 0;
,-webkit-transition-property:变换,上;
,-webkit-transform-origin: 50%, 50%, 0;
} 页面({
,/* *
,*页面的初始数据
,*/,数据:{
,windowWidth:““,//窗口宽度
,windowHeigh:““,//窗口高度
,packetList:{},//红包队列
,packetNum: 200//总共红包的数量
,showInter: & # 39; & # 39;//,循环动画定时器
},
,/* *
,*生命周期函数——监听页面加载
,*/,onLoad: function (选项),{=,var that ;
,
,//获取手机屏幕宽高
,wx.getSystemInfo ({
,,成功:function (res), {
that.setData({才能
,,,windowWidth: res.windowWidth,
,,,windowHeigh: res.windowHeight,
,,:,res.windowheight - 100,//设置红包初始位置
})才能
,,}
,})
,
,//建立临时红包列表
,var packetList=[];
,//建立临时红包图片数组
,var srcList =,(“. ./图片/packet-one.png",,“. ./图片/packet-two.png"];
,//生成初始化红包
,(var 我=0;i=that.data.packetNum) {//才能,如果所有预生成的红包已经掉落完,清除定时器
clearInterval才能(that.data.showInter);
}{其他才能
switch 才能;(showNum) {
,,case 1:
,,//设置临时红包列表当前索引下的值,此处前值为动画运动的最终值最高,
,,packetList [tempIndex] .top =, that.data.windowHeigh;
,,//,当前次掉落几个红包,索引值就加几
,,tempIndex +=1;
,才能打破;
,,case 2:
,,packetList [tempIndex] .top =, that.data.windowHeigh;
,,packetList [tempIndex +, 1] .top =, that.data.windowHeigh;
,,tempIndex +=2;
,才能打破;
,,case 3:
,,packetList [tempIndex] .top =, that.data.windowHeigh;
,,packetList [tempIndex +, 1] .top =, that.data.windowHeigh;
,,packetList [tempIndex +, 2] .top =, that.data.windowHeigh;
,,tempIndex +=, 3;
,才能打破;
,,默认值:
,,console.log ();
,,}//,才能更新红包列表数据
that.setData({才能
,,packetList: packetList
})才能
,,}
,},1000)
,}
})
今天就跟大家聊聊有关怎么在微信小程序中实现红包雨功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
wxml:
wxs:
js:
看完上述内容,你们对怎么在微信小程序中实现红包雨功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
