微信小程序抽獎(jiǎng)大轉(zhuǎn)盤(pán)的實(shí)現(xiàn)
2020-09-27|HiShop
導(dǎo)讀:很多商家都會(huì)利用轉(zhuǎn)盤(pán)抽獎(jiǎng)的形式來(lái)推銷(xiāo)自己的產(chǎn)品及店鋪,那么下面為大家介紹小程序轉(zhuǎn)盤(pán)抽獎(jiǎng)要怎么做?...
很多商家都會(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ú)效
當(dāng)然了 獎(jiǎng)品圖和內(nèi)容你可以自己修改 你也更好地定義球與獎(jiǎng)品圖樣式 你可以自己去完善 也許你也可以將獎(jiǎng)品轉(zhuǎn)動(dòng) 定義一個(gè)指針指向獎(jiǎng)品等.
您可能感興趣:小程序開(kāi)發(fā)