微信小程序大轉(zhuǎn)盤抽獎

-
分析完界面后就開始動手寫了
界面就是外面一個最大的view包住 閃動的小點一個view 8個獎品和一個START按鈕

*閃動的紅黃色小點

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

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

-
綁定獎品背景顏色通過當(dāng)前數(shù)組下標(biāo)來實現(xiàn)選中的效果 用setInterval來進行旋轉(zhuǎn)的效果,停下來的位置我們用一個隨機數(shù)來控制

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

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