最近闲来无事，做了一个多宫格抽奖的例子，有什么需要改进或者错误的地方，请留言，谢谢
首先看效果：
思路是先让其转动2圈多，然后再进行抽奖，格子运动用的是setTimeout，让其运行的时间间隔不一样，然后产生运动快慢的效果
好了，上代码
首先是WXML(这里面的判断可能有些绕，仔细按顺序看，因其第五个和第十一个格子在不同手机屏幕大小上的显示有问题，所以再次给它们判断了一下)
Box">
{{item.name}}
{{howManyNum}}次抽奖机会
WXSS：
Box{
margin:20rpx 25rpx;
height: 400rpx;
width: 698rpx;
/*border:1px solid #ddd;*/
position: relative;
/*Box-sizing: border-Box;*/
}
.Boxsub{
width: 140rpx;
height: 100rpx;
/*border: 1px solid #f00;*/
Box-sizing: border-Box;
position: absolute;
background: #ff6100;
border: 1rpx solid #fff;
}
.Boxcontent{
text-align: center;
font-size: 26rpx;
display: block;
color: #fff;
}
.lucky{
width: 300rpx;
height:130rpx;
background:#ff6100;/#ff6100;007FFF/
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0rpx;
margin: auto;
}
.lucky:active{
opacity: 0.7;
}
.taplucky{
display: block;
text-align: center;
font-size: 30rpx;
line-height: 50rpx;
height: 50rpx;
color: #fff;
margin-top: 20rpx;
}
.howMany{
display: block;
text-align: center;
font-size: 26rpx;
color: #fff;
line-height: 40rpx;
height: 40rpx;
}
.howMany_num{
color:#007FFF;
font-size:32rpx;
line-height:40rpx;
padding:0 10rpx;
}
.luck{
opacity: 0.5;
background: #ff6100;
}
JS
0){//当没有处于抽奖状态且剩余的抽奖次数大于零，则可以进行抽奖
console.log('prize:'+prize);
this.data.content.count=this.data.Box.length;
this.setData({
howManyNum:howManyNum-1//更新抽奖次数
});
this.data.luckytapif=false;//设置为抽奖状态
this.data.prize = prize;//中奖的序号
this.roll();//运行抽奖函数
} else if (howManyNum == 0 && luckytapif){
wx.showModal({
title: '',content: '您的抽奖次数已经没有了',showCancel:false
})
}
},//抽奖
roll:function(){
var content=this.data.content,prize = this.data.prize,//中奖序号
that=this;
if (content.cycle - (content.count-prize)>0){//最后一轮的时间进行抽奖
content.index++;
content.cycle--;
this.setData({
luckynum: content.index%14 //当前应该反映在界面上的位置
});
setTimeout(this.roll,content.speed);//继续运行抽奖函数
}else{
if (content.index < (content.count*3 + prize)){//判断是否停止
content.index++;
content.speed += (550 /14);//最后一轮的速度，匀加速，最后停下时的速度为550+50
this.data.content=content;
this.setData({
luckynum: content.index % 14
});
console.log(content.index,content.speed);//打印当前的步数和当前的速度
setTimeout(this.roll,content.speed);
}else{
//完成抽奖，初始化数据
console.log('完成');
content.index =0;
content.cycle = 3 * 14;
content.speed = 50;
this.data.luckytapif = true;
clearTimeout(time);
wx.showModal({
title: '',content: '恭喜你抽到了'+that.data.Box[prize].name,showCancel:false
})
}
}
},onLoad: function (options) {
},onReady: function () {
},onShow: function () {
},onHide: function () {
},onUnload: function () {
}
})
完结。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
总结
以上是编程之家为你收集整理的微信小程序实现多宫格抽奖活动全部内容，希望文章能够帮你解决微信小程序实现多宫格抽奖活动所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
