微信小程序如何实现走马灯式抽奖

微信小程序如何实现走马灯式抽奖

今天小编给大家分享一下微信小程序如何实现走马灯式抽奖的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

先来看下效果

设置奖项

awardList是从后台拿到的奖项数组，list不够八位时填充谢谢参与奖项，超过八位时截取数组，然后随机打乱数组，保证奖项随机布局，第四位固定填充立即抽奖按钮

//设置奖项settingAward(awardList){constlen=awardList.length;constaward={awardName:'谢谢参与',awardMoney:0,awardType:'00',awardCode:''};let_awardList=[];if(len<8){for(leti=0;i<8-len;i++){awardList.push(JSON.parse(JSON.stringify(award)));}this.randArr(awardList);_awardList=awardList;console.log(_awardList)}elseif(awardList.length==8)_awardList=awardList;else{_awardList=awardList.splice(0,9);}_awardList.splice(4,0,{awardName:'立即抽奖'})return_awardList;},//随机打乱奖项randArr(arr){for(vari=0;i<arr.length;i++){variRand=parseInt(arr.length*Math.random());vartemp=arr[i];arr[i]=arr[iRand];arr[iRand]=temp;}returnarr;}

布局

主要用了flex布局，遍历奖品list，index==4时渲染立即抽奖按钮，否则渲染奖项

<viewclass="content"><viewwx:for="{{awardList}}"><viewwx:if="{{index==4}}"class="award"><viewwx:if="{{activityCount>0}}"class="btn{{lucking?'lucking':'lucked'}}"><textclass="btn_text"catchtap="startLuck">{{item.awardName}}</text></view><viewwx:elseclass="btnlucking"><textclass="btn_text">{{item.awardName}}</text></view></view><viewwx:elseclass="award{{currentIndex==index?'selected':'unselected'}}"><blockwx:if="{{item.awardType=='00'}}"><viewclass="option"><imagesrc="../../img/noluck_icon.png"></image></view><viewclass="txt">{{item.awardName}}</view></block><blockwx:elif="{{item.awardType=='07'}}"><viewclass="option"><imagesrc="../../img/mianxi_icon.png"></image></view><viewclass="txt">{{item.awardName}}</view></block><blockwx:else><viewclass="option"><imagesrc="../../img/turntable_redpacket.png"></image><textclass="price">{{util.formatMoney(item.awardMoney)}}</text></view><viewclass="txt">{{item.awardName}}</view></block></view></view></view>

抽奖逻辑

开始抽奖时默认选中第一个，初始化idArr为currentIndex的索引，即下一个奖项在哪激活
记录圈数let cycles = 0;
开始设置interval = setInterval(frame, 100);
index == 8时轮询了一圈，cycles加一
当cycles > 2时减速定时器interval = setInterval(frame, 300);
当抽奖接口有结果且转了三圈后跳到获奖位置，清除定时器并弹出获奖结果弹窗

//开始抽奖startLuck(){constidArr=[0,1,2,5,8,7,6,3];letcycles=0;letthat=this;let_awardList=this.data.awardList;letindex=this.data.currentIndex;letactivityCount=this.data.activityCount-1;varinterval=setInterval(frame,100);this.setData({lucking:true,activityCount})letpending=true;post('122201.app',{duration:2000,activityCode:this.data.activityCode},{isMarket:true}).then(res=>{pending=false;this.setData({awardResult:{awardCode:"",...res}})}).catch(err=>{clearInterval(interval);pending=false;activityCount+=1;this.setData({activityCount,lucking:false,})})functionframe(){if(!pending){//转三圈后跳到获奖位置if(cycles>3){if(_awardList[that.data.currentIndex].awardCode==that.data.awardResult.awardCode){clearInterval(interval);that.setData({lucking:false,showModal:true})return;}}}if(index==8){index=0;if(!pending){//两圈后转盘减速if(cycles++>1){clearInterval(interval);interval=setInterval(frame,300);}}}//设置奖项跳到对应位置that.setData({currentIndex:idArr[index++]})}},

wxss

.turntable.content{width:568rpx;height:568rpx;background:#F48002;border-radius:20px;position:absolute;top:90rpx;left:30rpx;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;padding:10rpx;box-sizing:border-box;}.turntable.content.award{width:174rpx;height:174rpx;background:#FFFFFF;border-radius:20rpx;display:flex;flex-direction:column;justify-content:center;align-items:center;}

以上就是“微信小程序如何实现走马灯式抽奖”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注恰卡编程网行业资讯频道。