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

第微信小程序实现走马灯式抽奖本文实例为大家分享了微信小程序实现走马灯式抽奖的具体代码，供大家参考，具体内容如下

先来看下效果

设置奖项

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

//设置奖项

settingAward(awardList){

constlen=awardList.length;

constaward={

awardName:'谢谢参与',

awardMoney:0,

awardType:'00',

awardCode:''

};

let_awardList=[];

if(len8){

for(leti=0;i8-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;iarr.length;i++){

variRand=parseInt(arr.length*Math.random());

vartemp=arr[i];

arr[i]=arr[iRand];

arr[iRand]=temp;

}

returnarr;

}

布局

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

view

viewwx:for="{{awardList}}"

viewwx:if="{{index==4}}"

viewwx:if="{{activityCount0}}"class="btn{{lucking'lucking':'lucked'}}"

textcatchtap="startLuck"{{item.awardName}}/text

/view

viewwx:else

text{{item.awardName}}/text

/view

/view

viewwx:elseclass="award{{currentIndex==index'selected':'unselected'}}"

blockwx:if="{{item.awardType=='00'}}"

view

imagesrc="../../img/noluck_icon.png"/image

/view

view{{item.awardName}}/view

/block

blockwx:elif="{{item.awardType=='07'}}"

view

imagesrc="../../img/mianxi_icon.png"/image

/view

view{{item.awardName}}/view

/block

blockwx:else

view

imagesrc="../../img/turntable_redpacket.png"/image

text{{util.formatMoney(item.awardMoney)}}/text

/view

view{{item.awardName}}/view

/block

/view

/view

/view

抽奖逻辑

开始抽奖时默认选中第一个，初始化idArr为currentIndex的索引，即下一个奖项在哪激活

记录圈数letcycles=0;

开始设置interval=setInterval(frame,100);

index==8时轮询了一圈，cycles加一

当cycles2时减速定时器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(cycles3){

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.cont