資源簡介
微信小程序抽獎輪盤,可定義抽獎概率
從抽獎轉盤的圖中我們可以看出，抽獎轉盤由外圓、扇面抽獎選項、抽獎按鈕組成，其中外圓不難實現，大家在處理微信小程序頭像的時候估計都已經用過了，那就是利用border-radius:50%來將一個正方形變成圓，這是外圓實現的關鍵。為了體現立體效果，我們給外圓的border加上陰影，也就是border-shadow樣式，這樣一處理，外圓的立體效果就出來了。
外圓里面是抽獎的獎項，抽獎獎項由獎品名稱和一條線組成，通過將線和獎品名稱旋轉一定的角度就可以得到界面效果，這里用到的主要功能是：transform: rotate。這里說是線，其實是一個個的view通過設置w
代碼片段和文件信息
?屬性????????????大小?????日期????時間???名稱
-----------?---------??----------?-----??----
?????目錄???????????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個文件信息
-----------?---------??----------?-----??----
?????目錄???????????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個文件信息
- 上一篇：多項目打包模塊pom打包
- 下一篇：粒子群算法計算二元函數的最小值
評論
共有 條評論
川公網安備 51152502000135號