小程序实现多宫格抽奖活动的示例

　　介绍

小编给大家分享一下小程序实现多宫格抽奖活动的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

首先看效果:

小程序实现多宫格抽奖活动的示例

思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然后产生运动快慢的效果

好了,上代码

首先是WXML(这里面的判断可能有些绕,仔细按顺序看,因其第五个和第十一个格子在不同手机屏幕大小上的显示有问题,所以再次给它们判断了一下)

& lt; view 类=癰ox"比; 　　,& lt; view 类=癰oxsub  {{luckynum==指数? & # 39;运气# 39;:& # 39;& # 39;}},,天气:=& # 39;{{盒子}}& # 39;,风格=皗{index> 0,, index<4 ? & # 39;: 0;左:& # 39;+指数* 140 + & # 39;rpx; & # 39;: (index> 3,, index<8 ? & # 39;右:0; 　　,上图:& # 39;+ ((index-4) * 100) + & # 39; rpx; & # 39;: (index> 7,和index<12 ? & # 39;底:0;右:& # 39;+ (index-7) * 140 + & # 39; rpx; & # 39;: (index> 11,, index<14 ? & # 39;左:0;底:& # 39;+ (index-11) * 100 + & # 39; rpx; & # 39;: & # 39; & # 39;)))}}, 　　,{{指数==& # 39;4 & # 39;? & # 39;:0;& # 39;:& # 39;& # 39;}},{{指数==& # 39;11 & # 39;? & # 39;左:0;& # 39;:& # 39;& # 39;}},,,天气:关键=& # 39;& # 39;比; 　　,,& lt; text 类=& # 39;boxcontent& # 39;,风格=& # 39;{{item.name.length> 6 ?“行高:40 rpx; margin-top: 10 rpx;“:“行高:100 rpx;“}} & # 39;在{{item.name}} & lt;/text>, 　　,, 　　,& lt;/view> 　　,& lt; view 类=發ucky", catchtap=發uckyTap"比; 　　& lt;才能text 类=皌aplucky"在点击抽奖& lt;/text> 　　& lt;才能text 类=癶owMany"在您还有& lt; text 类=癶owMany_num",在{{howManyNum}} & lt;/text>次抽奖机会& lt;/text> 　　,& lt;/view> 　　& lt;/view> 　　& lt; view 类=癳xplain"祝辞 　　 　　& lt;/view>

wxs:

.box { 　　,保证金:20 rpx  25 rpx; 　　,身高:400 rpx; 　　,宽度:698 rpx; 　　,/*边境:1 px  solid  # ddd; */,位置:相对; 　　,/* box-sizing: border-box; */} 　　.boxsub { 　　,宽度:140 rpx; 　　,身高:100 rpx; 　　,/*边境:1 px  solid  # f00; */,box-sizing: border-box; 　　,位置:绝对; 　　,背景:# ff6100; 　　,边界:1 rpx  solid  # fff; 　　, 　　} 　　.boxcontent { 　　,text-align:中心; 　　,字体大小:26 rpx; 　　,显示:块; 　　,颜色:# fff; 　　} 　　.lucky { 　　,宽度:300 rpx; 　　,身高:130 rpx; 　　,背景:# ff6100;/*, # ff6100; 007 fff */,位置:绝对; 　　,左: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; 　　}

JS

var  time =,零;//setTimeout的ID,用clearTimeout清除 　　页面({ 　　,数据:{ 　　,盒子:[{ 　　名称:& # 39;才能积100分& # 39; 　　,},{ 　　,,名字:& # 39;10元优惠券\ n满100可用& # 39; 　　,},{ 　　,,名字:& # 39;积60分& # 39; 　　,},{ 　　,,名字:& # 39;积30分& # 39; 　　,},{ 　　,,名字:& # 39;积50分& # 39; 　　,},{ 　　,,名字:& # 39;30元优惠券\ n满120可用& # 39; 　　,},{ 　　,,名字:& # 39;积100分& # 39; 　　,},{ 　　,,名字:& # 39;积200分& # 39; 　　,},{ 　　,,名字:& # 39;积10分& # 39; 　　,},{ 　　,,名字:& # 39;积50分& # 39; 　　,},{ 　　,,名字:& # 39;积40分& # 39; 　　,},{ 　　,,名字:& # 39;50优惠券满500可用& # 39; 　　,},{ 　　,,名字:& # 39;积60分& # 39; 　　,},{ 　　,,名字:& # 39;积70分& # 39; 　　}), 　　,luckynum: 0,//当前运动到的位置,在界面渲染//抽,howManyNum: 10日奖的剩余次数 　　,内容:{ 　　,,指数:0,,//当前转动到哪个位置,起点位置 　　,,数:0,,//总共有多少个位置 　　速度:才能,50岁,//初始转动速度 　　,,周期:3 * 14日,//转动基本次数:即至少需要转动多少次再进入抽奖环节,这里设置的是转动三次后进入抽奖环节 　　}, 　　,奖:0,//中奖的位置 　　,luckytapif:真//判断现在是否可以点击 　　}, 　　,//点击抽奖 　　,luckyTap:函数(){ 　　,var 我=0,=这个才能, 　　时间=howManyNum 才能;this.data.howManyNum,//剩余的抽奖次数 　　时间=luckytapif 才能;this.data.luckytapif,//获取现在处于的状态 　　时间=luckynum 才能;this.data.luckynum,//当前所在的格子 　　prize 才能=Math.floor (math . random() * 14),,//中奖序号,随机生成 　　,if  (luckytapif ,,, howManyNum> 0){//当没有处于抽奖状态且剩余的抽奖次数大于零,则可以进行抽奖 　　console.log才能(& # 39;奖:& # 39;+奖金); 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

小程序实现多宫格抽奖活动的示例