微信小程序抽獎(jiǎng)大轉(zhuǎn)盤(pán)的實(shí)現(xiàn)

很多商家都會(huì)利用轉(zhuǎn)盤(pán)抽獎(jiǎng)的形式來(lái)推銷(xiāo)自己的產(chǎn)品及店鋪，那么下面為大家介紹小程序轉(zhuǎn)盤(pán)抽獎(jiǎng)要怎么做？

界面就是外面一個(gè)最大的view包住 閃動(dòng)的小點(diǎn)一個(gè)view 8個(gè)獎(jiǎng)品和一個(gè)START按鈕

 

 

*閃動(dòng)的紅黃色小點(diǎn)

 

我們計(jì)算好每個(gè)點(diǎn)的位置 用for循環(huán)設(shè)置坐標(biāo)值

定義紅黃兩色小球用setInterval更改顏色和實(shí)現(xiàn)閃動(dòng)效果

計(jì)算好獎(jiǎng)品圖片的位置 同理循壞定義

 

 

綁定獎(jiǎng)品背景顏色通過(guò)當(dāng)前數(shù)組下標(biāo)來(lái)實(shí)現(xiàn)選中的效果 用setInterval來(lái)進(jìn)行旋轉(zhuǎn)的效果，停下來(lái)的位置我們用一個(gè)隨機(jī)數(shù)來(lái)控制

注意
旋轉(zhuǎn)中途點(diǎn)擊我們應(yīng)將START變?yōu)閃AIT并且在事件中增加判斷其狀態(tài) 使其點(diǎn)擊無(wú)效

結(jié)果圖

 

 

當(dāng)然了 獎(jiǎng)品圖和內(nèi)容你可以自己修改 你也更好地定義球與獎(jiǎng)品圖樣式 你可以自己去完善 也許你也可以將獎(jiǎng)品轉(zhuǎn)動(dòng) 定義一個(gè)指針指向獎(jiǎng)品等.