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

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

先來看下效果

設(shè)置獎項

awardList是從后臺拿到的獎項數(shù)組，list不夠八位時填充謝謝參與獎項，超過八位時截取數(shù)組，然后隨機打亂數(shù)組，保證獎項隨機布局，第四位固定填充立即抽獎按鈕

//設(shè)置獎項

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的索引，即下一個獎項在哪激活

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

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

index==8時輪詢了一圈，cycles加一

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

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

//開始抽獎

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)三圈后跳到獲獎位置

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)盤減速

if(cycles++1){

clearInterval(interval);

interval=setInterval(frame,300);

}

}

}

//設(shè)置獎項跳到對應(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