1.0.28 • Published 6 years ago
myluckywheel v1.0.28
大转盘组件
1.转盘描述
1.1 转盘样式描述
转盘是由转盘标题,转盘背景图,奖品鱼片,抽奖按钮,转盘圆盘背景图,奖品文字说明,剩余抽奖次数以及神域抽奖次数背景图组成,其中奖品图片,奖品说明文字,抽奖次数,转盘圆盘背景图可以由用户自定义。
在转盘旋转结束时,会根据结果弹出中奖弹窗或未中奖弹窗。
1.2 转盘功能描述
用户点击抽奖按钮,转盘旋转,停止后,根据返回中奖ID值,转盘停留在中奖奖品或者未中奖处,弹出中奖或未中奖说明弹窗,抽奖次数减1,待次数用尽时,点击关闭弹窗时,页面跳转到指定页面。
2.使用教程
2.1 安装
2.2 方法定义及参数说明
参数说明:
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
total | Number | 8 | 奖品数目 |
change | Number | 5 | 抽奖次数 |
wheelUrl | Array | - | 圆盘背景URL |
newUrl | String | "http://www.longfor.com/" | 抽奖结束跳转URL,默认龙湖官网 |
prizeIdFn | Function | - | 返回获奖ID |
prizeInfo | Array(:Object) | - | 奖品列表 |
wheelUrl中的值需以require()形式传入:
wheelUrl: [
require("./assets/img/draw_six.png")
],
prizeInfo中元素的结构:
元素 | 类型 | 说明 |
---|---|---|
icon | 奖品图片URL | |
name | String | 奖品名称 |
isPrize | 0或1 | 0表示不是奖品(未中奖)1表示是奖品 |
id | String | ID |
prizeDes | String | 奖品的描述性语言 |
具体如下所示:
prizeInfo: [{
icon: require("./img.png"),//奖品图片url
name: "龙小湖玩偶", // 奖品名称
isPrize: 1, // 该奖项是否为奖品
id: 'pig', // 奖品id
prizeDes:'恭喜获得玩偶一只'//获奖描述
},
……]
Event
事件名 | 说明 | 参数 |
---|---|---|
endPrize | 点击抽奖按钮时触发 | true |
注意:
1, 传入的奖品数目应与传入奖品列表的长度一致。
2, 传入圆盘背景图的分割线应有一条与抽奖按钮指针方向重合,即指向12点方向。
正确的图片方向:
错误的图片方向:
1.0.28
6 years ago
1.0.27
6 years ago
1.0.26
6 years ago
1.0.25
6 years ago
1.0.24
6 years ago
1.0.23
6 years ago
1.0.22
6 years ago
1.0.21
6 years ago
1.0.20
6 years ago
1.0.19
6 years ago
1.0.18
6 years ago
1.0.17
6 years ago
1.0.16
6 years ago
1.0.15
6 years ago
1.0.14
6 years ago
1.0.13
6 years ago
1.0.12
6 years ago
1.0.11
6 years ago
1.0.10
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago