介绍 & lt;视图类=癰ox"比;
& lt;视图类=癰oxsub {{luckynum==index& # 63; & # 39;运气# 39;:& # 39;& # 39;}},天气:=& # 39;{{盒子}}& # 39;天气:关键=& # 39;& # 39;比;
& lt;文本类=& # 39;boxcontent& # 39;=& # 39;风格{{item.name.length> 6, # 63;“行高:40 rpx; margin-top: 10 rpx;“:“行高:100 rpx;“}} & # 39;在{{item.name}} & lt;/text>
& lt;/view>
& lt;视图类=發ucky"catchtap=發uckyTap"比;
& lt;文本类=皌aplucky"祝辞点击抽奖& lt;/text>
& lt;文本类=癶owMany"在您还有& lt;文本类=癶owMany_num"在{{howManyNum}} & lt;/text>次抽奖机会& lt;/text>
& lt;/view>
& lt;/view>
& lt;视图类=癳xplain"祝辞
& lt;/view> .box {
保证金:20 rpx 25 rpx;
身高:400 rpx;
宽度:698 rpx;/*边境:1 px固体# ddd; */位置:相对;/* box-sizing: border-box; */}
.boxsub {
宽度:140 rpx;
身高:100 rpx;/*边境:1 px固体# f00; */box-sizing: border-box;
位置:绝对的;
背景:# ff6100;
边界:1 rpx固体# fff;
}
.boxcontent {
text-align:中心;
字体大小:26 rpx;
显示:块;
颜色:# fff;
}
.lucky {
宽度:300 rpx;
身高:130 rpx;
背景:# ff6100; fff *//* # ff6100; 007
位置:绝对的;
左:0;
底部:0;
右:0;
上图:0 rpx;
保证金:汽车;
}
{.lucky:活跃
透明度:0.7;
}
.taplucky {
显示:块;
text-align:中心;
字体大小:30 rpx;
行高:50 rpx;
高度:50 rpx;
颜色:# fff;
margin-top: 20 rpx;
}
.howMany {
显示:块;
text-align:中心;
字体大小:26 rpx;
颜色:# fff;
行高:40 rpx;
高度:40 rpx;
}
.howMany_num {
颜色:# 007 fff;
字体大小:32 rpx;
行高:40 rpx;
填充:0 10 rpx;
}
.luck {
透明度:0.5;
背景:# ff6100;
}
这篇文章主要为大家展示了微信小程序如何实现多宫格抽奖活动,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
首先看效果:
思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然后产生运动快慢的效果
好了,上代码
首先是WXML(这里面的判断可能有些绕,仔细按顺序看,因其第五个和第十一个格子在不同手机屏幕大小上的显示有问题,所以再次给它们判断了一下)
wxs:
JS
微信小程序如何实现多宫格抽奖活动
