微信小程序实现九宫格抽奖

本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码，适用于年会抽奖，供大家参考，具体内容如下

效果图比较卡顿，真实运行效果是旋转的

用到的素材：

实现步骤：

实现原理

改变每一项的透明度实现选中效果。利用函数时间使旋转速度越来越慢。达到慢慢停止的效果。实际应用中可以将9张奖品图片和中奖项均通过接口返回。以方便奖品的调整。

1.布局绘制

视图类="容器"停止位置：输入值='{{luckPosition}} '样式='宽度：100%；text-align : center ' bind input=' input ' type=' number '/input view class=' frame _ view ' view class=' frame _ row ' image class=' frame _ item ' style=' opa city 3360 { { color[0]} } ' src=' { { images[0]} } '/image image class=' frame _ item ' style=' opa city 3360 { { color[1]} ' src=' { { images[1]} '/image class='数据准备

//计数器定义变量区间=null/值越大旋转时间越长即旋转速度var intime=50 data : { color :[0.5，0.5，0.5，0.5，0.5，0.5，0.5，0.5，0.5，0.5]，//9张奖品图片images: ['/images/item.png '，'/images/item1.png '，'/images/item.png '，'/images/item1.png '，'/images/item1.png '，'/images/item.png '，'/images/item1.png '，'/images/item1。png '，'/images/item.png']，//确定按钮BTN confirm : '/images/Dian jichoujiang。png '，//点击事件单击Luck: '单击运气',//中奖位置luckPosition:0，}，3 .显示界面时慢慢转动

//进入页面时缓慢切换loadanimation :函数(){ var e=this//初始位置为0 var索引=0;//每一秒钟切换一次位置interval=setInterval(function(){ if(index 7){ index=0；数据。color[7]=0.5 } else if(index！=0){ e . data。颜色[索引-1]=0.5 } e .数据。color[index]=1e . setdata({ color : e . data。颜色，})索引；}, 1000);}4.停止旋转

//哪个为中奖位置需要停止时调用该方法stop:函数（其中){ var e=this//清空计数器clearInterval(区间);//初始化当前位置定义变量电流=-1;var color=e . data。颜色；for(var I=0；我颜色。长度；I){ if(color[I]==1){ current=I；} } //下标从一开始定义变量指数=当前1;e。叠字牌（即索引，intime，10)；},/** *哪个：中奖位置* index:当前位置*时间：时间标记*分裂时间：每次增加的时间值越大减速越快*/叠梁：函数（其中，索引，时间，拆分时间){ var e=this//值越大出现中奖结果后减速时间越长var color=e . data。颜色；setTimeout(函数(){ //重置前一个位置if(index 7){ index=0；color[7]=0.5 } else if (index！=0) {颜色[索引- 1]=0.5 } //当前位置为选中状态color[index]=1 e . setdata({ color : color，}) //如果旋转时间过短或者当前位置不等于中奖位置则递归执行//直到旋转至中奖位置如果(时间400 ||索引！=哪个){ //越来越慢split time=split time//当前位置一指数；e。叠字牌（它、索引、时间、分裂时间)；}else{ //1秒后显示弹窗setTimeout(函数(){ if(what==1 | | what==3 | | what==5 | | what==7){//中奖wx.showModal({ title: '提示，content: '恭喜中奖，showCancel: false，success:函数(res) { if (res.confirm) { //设置按钮可以点击e . setdata({ BTN confirm : '/images/diangjichoujiang。png '，clickLuck: 'clickLuck '，})e . load animation()；} } }) } else { //中奖wx.showModal({ title: '提示，content: '很遗憾未中奖，showCancel: false，success :函数(RES){ if(RES . confirm){//设置按钮可以点击e . setdata({ BTN confirm : '/images/diangjichoujiang。png '，clickLuck: 'clickLuck '，})e . load animation()；} } }) } }, 1000);} },时间);},5可以点击按钮后停止抽奖或者点击开始抽奖停止一段时候后自动停止

//模拟网络请求时间设为两秒var stop time=2000 settimeout(function(){ e . stop(e . data。运气位置)；}，stoptime)gitub地址：微信小程序九宫格抽奖

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。