采用微信組件的方式提供，因組件內部使用了async/await，所以請在微信開發者工具"詳情=》本地設置 勾上 增強編譯和使用npm"，小程序npm使用方法請參考：微信小程序-npm支持
先看效果圖：
使用步驟：
步驟一：
安裝依賴或前往githua下載源碼，拷貝dist目錄下的lottery-turntable目錄
|
1
|
npm i lottery-turntable-for-wx-miniprogram |
步驟二：
頁面JSON配置
|
1
2
3
4
5
|
{ "usingComponents": { "lottery-turntable":"lottery-turntable-for-wx-miniprogram/lottery_turntable/index" }} |
步驟三：
準備數據和增加事件處理（使用組件頁面JS）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
const datas = [{ "id": "792085712309854208", "imgUrl": "../../images/icon.png", "title": "迅雷白金會員月卡 - 1"}, { "id": "766410261029724160", "imgUrl": "../../images/icon.png", "title": "迅雷白金會員月卡 - 2"}, { "id": "770719340921364480", "imgUrl": "../../images/icon.png", "title": "迅雷白金會員月卡 - 3"}, { "id": "770946438416048128", "imgUrl": "../../images/icon.png", "title": "迅雷白金會員月卡 - 4"}, { "id": "781950121802735616", "imgUrl": "../../images/icon.png", "title": "迅雷白金會員月卡 - 5"}, { "id": "766411654436233216", "imgUrl": "../../images/icon.png", "title": "迅雷白金會員月卡 - 6"}, { "id": "770716883860332544", "imgUrl": "../../images/icon.png", "title": "迅雷白金會員月卡 - 7"}, { "id": "796879308510732288", "imgUrl": "../../images/icon.png", "title": "迅雷白金會員月卡 - 8"}]; Page({ data: { datas: datas, // 數據 prizeId: '', // 抽中結果id，通過屬性方式傳入組件 config: { // 轉盤配置，通過屬性方式傳入組件 titleLength: 7 } }, /** * 次數不足回調 * @param e */ onNotEnoughHandle(e) { wx.showToast({ icon: 'none', title: e.detail }) }, /** * 抽獎回調 */ onLuckDrawHandle() { this.setData({ prizeId: this.data.datas[Math.floor(Math.random() * 10 % this.data.datas.length)].id }); }, /** * 動畫旋轉完成回調 */ onLuckDrawFinishHandle() { const datas = this.data.datas; const data = datas.find((item) => { return item.id === this.data.prizeId; }); wx.showToast({ icon: 'none', title: `恭喜你抽中 ${data.title}` }) this.setData({ prizeId: '' }); }}) |
步驟四：
頁面使用
|
1
2
3
4
5
6
7
8
9
|
<lottery-turntable data="{{datas}}" prize-id="{{prizeId}}" count="{{5}}" config="{{config}}" bindLuckDraw="onLuckDrawHandle" bindNotEnough="onNotEnoughHandle" bindLuckDrawFinish="onLuckDrawFinishHandle" ></lottery-turntable> |
步驟五：
更改組件配置項（以下為默認配置），通過config屬性傳入一個js對象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
/** * ease: 取值如下 * 'linear' 動畫從頭到尾的速度是相同的 * 'ease' 動畫以低速開始，然后加快，在結束前變慢 * 'ease-in' 動畫以低速開始 * 'ease-in-out' 動畫以低速開始和結束 * 'ease-out' 動畫以低速結束 * 'step-start' 動畫第一幀就跳至結束狀態直到結束 * 'step-end' 動畫一直保持開始狀態，最后一幀跳到結束狀態 */// 以下為默認配置let config = { size: { width: '572rpx', height: '572rpx' }, // 轉盤寬高 bgColors: ['#FFC53F', '#FFED97'], // 轉盤間隔背景色 支持多種顏色交替 fontSize: 10, // 文字大小 fontColor: '#C31A34', // 文字顏色 titleMarginTop: 12, // 最外文字邊距 titleLength: 6 // 最外文字個數 iconWidth: 29.5, // 圖標寬度 iconHeight: 29.5, // 圖標高度 iconAndTextPadding: 4, // 最內文字與圖標的邊距 duration: 8000, // 轉盤轉動動畫時長 rate: 1.5, // 由時長s / 圈數得到 border: 'border: 10rpx solid #FEFAE4;', // 轉盤邊框 ease: 'ease-out' // 轉盤動畫}; |
總結
到此這篇關于微信小程序抽獎組件的文章就介紹到這了,更多相關微信小程序抽獎組件內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/llf1991/article/details/112364439
