wxml:

<viewwx:for="{{packetList}}"wx:for-index="index"wx:for-item="items"><imageclass="red-packet"src="{{items.src}}"></image></view>

wxss:

.red-packet{width:20px;height:25px;z-index:100;transition-property:transform,top;transform-origin:50%50%0;-webkit-transition-property:transform,top;-webkit-transform-origin:50%50%0;}

js:

Page({/***页面的初始数据*/data:{windowWidth:"",//窗口宽度windowHeigh:"",//窗口高度packetList:[{}],//红包队列packetNum:200,//总共红包的数量showInter:''//循环动画定时器},/***生命周期函数--监听页面加载*/onLoad:function(options){varthat=this;//获取手机屏幕宽高wx.getSystemInfo({success:function(res){that.setData({windowWidth:res.windowWidth,windowHeigh:res.windowHeight,top:res.windowHeight-100//设置红包初始位置})}})//建立临时红包列表varpacketList=[];//建立临时红包图片数组varsrcList=["../images/packet-one.png","../images/packet-two.png"];//生成初始化红包for(vari=0;i<that.data.packetNum;i++){//生成随机位置(水平位置)varleft=Math.random()*that.data.windowWidth-20;//优化位置,防止红包越界现象,保证每个红包都在屏幕之内if(left<0){left+=20;}elseif(left>that.data.windowWidth){left-=20;}//建立临时单个红包varpacket={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})}//初始化动画执行当前索引vartempIndex=0;//开始定时器,每隔1秒掉落一次红包that.data.showInter=setInterval(function(){//生成当前掉落红包的个数,1-3个varshowNum=Math.ceil(Math.random()*3);//防止数组越界if(tempIndex*showNum>=that.data.packetNum){//如果所有预生成的红包已经掉落完,清除定时器clearInterval(that.data.showInter);}else{switch(showNum){case1://设置临时红包列表当前索引下的top值,此处top值为动画运动的最终top值packetList[tempIndex].top=that.data.windowHeigh;//当前次掉落几个红包,索引值就加几tempIndex+=1;break;case2:packetList[tempIndex].top=that.data.windowHeigh;packetList[tempIndex+1].top=that.data.windowHeigh;tempIndex+=2;break;case3:packetList[tempIndex].top=that.data.windowHeigh;packetList[tempIndex+1].top=that.data.windowHeigh;packetList[tempIndex+2].top=that.data.windowHeigh;tempIndex+=3;break;default:console.log();}//更新红包列表数据that.setData({packetList:packetList})}},1000)}})

看完上述内容,你们对怎么在微信小程序中实现红包雨功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注本站行业资讯频道,感谢大家的支持。