微信小程序?qū)崿F(xiàn)走馬燈式抽獎(jiǎng)

第微信小程序?qū)崿F(xiàn)走馬燈式抽獎(jiǎng)本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)走馬燈式抽獎(jiǎng)的具體代碼，供大家參考，具體內(nèi)容如下

先來(lái)看下效果

設(shè)置獎(jiǎng)項(xiàng)

awardList是從后臺(tái)拿到的獎(jiǎng)項(xiàng)數(shù)組，list不夠八位時(shí)填充謝謝參與獎(jiǎng)項(xiàng)，超過(guò)八位時(shí)截取數(shù)組，然后隨機(jī)打亂數(shù)組，保證獎(jiǎng)項(xiàng)隨機(jī)布局，第四位固定填充立即抽獎(jiǎng)按鈕

//設(shè)置獎(jiǎng)項(xiàng)

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:'立即抽獎(jiǎng)'

})

return_awardList;

//隨機(jī)打亂獎(jiǎng)項(xiàng)

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布局，遍歷獎(jiǎng)品list，index==4時(shí)渲染立即抽獎(jiǎng)按鈕，否則渲染獎(jiǎng)項(xiàng)

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

抽獎(jiǎng)邏輯

開(kāi)始抽獎(jiǎng)時(shí)默認(rèn)選中第一個(gè)，初始化idArr為currentIndex的索引，即下一個(gè)獎(jiǎng)項(xiàng)在哪激活

記錄圈數(shù)letcycles=0;

開(kāi)始設(shè)置interval=setInterval(frame,100);

index==8時(shí)輪詢了一圈，cycles加一

當(dāng)cycles2時(shí)減速定時(shí)器interval=setInterval(frame,300);

當(dāng)抽獎(jiǎng)接口有結(jié)果且轉(zhuǎn)了三圈后跳到獲獎(jiǎng)位置，清除定時(shí)器并彈出獲獎(jiǎng)結(jié)果彈窗

//開(kāi)始抽獎(jiǎng)

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){

//轉(zhuǎn)三圈后跳到獲獎(jiǎng)位置

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){

//兩圈后轉(zhuǎn)盤(pán)減速

if(cycles++1){

clearInterval(interval);

interval=setInterval(frame,300);

}

}

}

//設(shè)置獎(jiǎng)項(xiàng)跳到對(duì)應(yīng)位置

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