資源簡(jiǎn)介
微信小程序抽獎(jiǎng)輪盤(pán),可定義抽獎(jiǎng)概率
從抽獎(jiǎng)轉(zhuǎn)盤(pán)的圖中我們可以看出，抽獎(jiǎng)轉(zhuǎn)盤(pán)由外圓、扇面抽獎(jiǎng)選項(xiàng)、抽獎(jiǎng)按鈕組成，其中外圓不難實(shí)現(xiàn)，大家在處理微信小程序頭像的時(shí)候估計(jì)都已經(jīng)用過(guò)了，那就是利用border-radius:50%來(lái)將一個(gè)正方形變成圓，這是外圓實(shí)現(xiàn)的關(guān)鍵。為了體現(xiàn)立體效果，我們給外圓的border加上陰影，也就是border-shadow樣式，這樣一處理，外圓的立體效果就出來(lái)了。
外圓里面是抽獎(jiǎng)的獎(jiǎng)項(xiàng)，抽獎(jiǎng)獎(jiǎng)項(xiàng)由獎(jiǎng)品名稱(chēng)和一條線(xiàn)組成，通過(guò)將線(xiàn)和獎(jiǎng)品名稱(chēng)旋轉(zhuǎn)一定的角度就可以得到界面效果，這里用到的主要功能是：transform: rotate。這里說(shuō)是線(xiàn)，其實(shí)是一個(gè)個(gè)的view通過(guò)設(shè)置w
代碼片段和文件信息
?屬性????????????大小?????日期????時(shí)間???名稱(chēng)
-----------?---------??----------?-----??----
?????目錄???????????0??2020-07-24?13:20??wxapp_88\
?????文件????????1071??2020-05-30?12:50??wxapp_88\LICENSE
?????文件?????????527??2020-05-30?12:50??wxapp_88\README.md
?????文件?????????757??2020-05-30?12:50??wxapp_88\app.js
?????文件?????????873??2020-07-24?13:20??wxapp_88\app.json
?????文件?????????255??2020-05-30?12:50??wxapp_88\app.wxss
?????目錄???????????0??2020-07-24?13:19??wxapp_88\image\
?????文件???????33230??2020-05-30?12:50??wxapp_88\image\+10.png
?????文件??????108676??2020-05-30?12:50??wxapp_88\image\+100.png
?????文件??????105423??2020-05-30?12:50??wxapp_88\image\+150.png
?????文件???????60399??2020-05-30?12:50??wxapp_88\image\+30.png
?????文件???????77286??2020-05-30?12:50??wxapp_88\image\+60.png
?????文件?????????429??2020-05-30?12:50??wxapp_88\image\icon-HL.png
?????文件?????????431??2020-05-30?12:50??wxapp_88\image\icon.png
?????文件???????54906??2020-05-30?12:50??wxapp_88\image\turn-table-bg.png
?????目錄???????????0??2020-07-24?13:19??wxapp_88\pages\
?????目錄???????????0??2020-07-24?13:19??wxapp_88\pages\canvas\
?????文件????????5649??2020-07-24?13:37??wxapp_88\pages\canvas\canvas.js
?????文件??????????51??2020-05-30?12:50??wxapp_88\pages\canvas\canvas.json
?????文件????????1599??2020-05-30?12:50??wxapp_88\pages\canvas\canvas.wxml
?????文件????????6415??2020-05-30?12:50??wxapp_88\pages\canvas\canvas.wxss
?????目錄???????????0??2020-07-24?13:19??wxapp_88\pages\list\
?????文件?????????939??2020-05-30?12:50??wxapp_88\pages\list\list.js
?????文件?????????108??2020-05-30?12:50??wxapp_88\pages\list\list.json
?????文件?????????603??2020-05-30?12:50??wxapp_88\pages\list\list.wxml
?????文件?????????447??2020-05-30?12:50??wxapp_88\pages\list\list.wxss
?????目錄???????????0??2020-07-24?13:19??wxapp_88\pages\logs\
?????文件?????????381??2020-05-30?12:50??wxapp_88\pages\logs\logs.js
?????文件??????????51??2020-05-30?12:50??wxapp_88\pages\logs\logs.json
?????文件?????????841??2020-05-30?12:50??wxapp_88\pages\logs\logs.wxml
?????文件?????????688??2020-05-30?12:50??wxapp_88\pages\logs\logs.wxss
............此處省略4個(gè)文件信息
-----------?---------??----------?-----??----
?????目錄???????????0??2020-07-24?13:20??wxapp_88\
?????文件????????1071??2020-05-30?12:50??wxapp_88\LICENSE
?????文件?????????527??2020-05-30?12:50??wxapp_88\README.md
?????文件?????????757??2020-05-30?12:50??wxapp_88\app.js
?????文件?????????873??2020-07-24?13:20??wxapp_88\app.json
?????文件?????????255??2020-05-30?12:50??wxapp_88\app.wxss
?????目錄???????????0??2020-07-24?13:19??wxapp_88\image\
?????文件???????33230??2020-05-30?12:50??wxapp_88\image\+10.png
?????文件??????108676??2020-05-30?12:50??wxapp_88\image\+100.png
?????文件??????105423??2020-05-30?12:50??wxapp_88\image\+150.png
?????文件???????60399??2020-05-30?12:50??wxapp_88\image\+30.png
?????文件???????77286??2020-05-30?12:50??wxapp_88\image\+60.png
?????文件?????????429??2020-05-30?12:50??wxapp_88\image\icon-HL.png
?????文件?????????431??2020-05-30?12:50??wxapp_88\image\icon.png
?????文件???????54906??2020-05-30?12:50??wxapp_88\image\turn-table-bg.png
?????目錄???????????0??2020-07-24?13:19??wxapp_88\pages\
?????目錄???????????0??2020-07-24?13:19??wxapp_88\pages\canvas\
?????文件????????5649??2020-07-24?13:37??wxapp_88\pages\canvas\canvas.js
?????文件??????????51??2020-05-30?12:50??wxapp_88\pages\canvas\canvas.json
?????文件????????1599??2020-05-30?12:50??wxapp_88\pages\canvas\canvas.wxm
?????文件????????6415??2020-05-30?12:50??wxapp_88\pages\canvas\canvas.wxss
?????目錄???????????0??2020-07-24?13:19??wxapp_88\pages\list\
?????文件?????????939??2020-05-30?12:50??wxapp_88\pages\list\list.js
?????文件?????????108??2020-05-30?12:50??wxapp_88\pages\list\list.json
?????文件?????????603??2020-05-30?12:50??wxapp_88\pages\list\list.wxm
?????文件?????????447??2020-05-30?12:50??wxapp_88\pages\list\list.wxss
?????目錄???????????0??2020-07-24?13:19??wxapp_88\pages\logs\
?????文件?????????381??2020-05-30?12:50??wxapp_88\pages\logs\logs.js
?????文件??????????51??2020-05-30?12:50??wxapp_88\pages\logs\logs.json
?????文件?????????841??2020-05-30?12:50??wxapp_88\pages\logs\logs.wxm
?????文件?????????688??2020-05-30?12:50??wxapp_88\pages\logs\logs.wxss
............此處省略4個(gè)文件信息
評(píng)論
共有 條評(píng)論
川公網(wǎng)安備 51152502000135號(hào)