1.0.28 • Published 6 years ago

myluckywheel v1.0.28

Weekly downloads
188
License
-
Repository
-
Last release
6 years ago

大转盘组件

1.转盘描述

1.1 转盘样式描述

luckywheel 转盘是由转盘标题,转盘背景图,奖品鱼片,抽奖按钮,转盘圆盘背景图,奖品文字说明,剩余抽奖次数以及神域抽奖次数背景图组成,其中奖品图片,奖品说明文字,抽奖次数,转盘圆盘背景图可以由用户自定义。 wheeltoast 在转盘旋转结束时,会根据结果弹出中奖弹窗或未中奖弹窗。

1.2 转盘功能描述

用户点击抽奖按钮,转盘旋转,停止后,根据返回中奖ID值,转盘停留在中奖奖品或者未中奖处,弹出中奖或未中奖说明弹窗,抽奖次数减1,待次数用尽时,点击关闭弹窗时,页面跳转到指定页面。

2.使用教程

2.1 安装

2.2 方法定义及参数说明

参数说明:

参数类型默认值说明
totalNumber8奖品数目
changeNumber5抽奖次数
wheelUrlArray-圆盘背景URL
newUrlString"http://www.longfor.com/"抽奖结束跳转URL,默认龙湖官网
prizeIdFnFunction-返回获奖ID
prizeInfoArray(:Object)-奖品列表

wheelUrl中的值需以require()形式传入:

 wheelUrl: [
                require("./assets/img/draw_six.png")
            ],

prizeInfo中元素的结构:

元素类型说明
icon奖品图片URL
nameString奖品名称
isPrize0或10表示不是奖品(未中奖)1表示是奖品
idStringID
prizeDesString奖品的描述性语言

具体如下所示:

 prizeInfo: [{
                icon: require("./img.png"),//奖品图片url
                name: "龙小湖玩偶",  // 奖品名称
                isPrize: 1,      // 该奖项是否为奖品
                id: 'pig',      // 奖品id
                prizeDes:'恭喜获得玩偶一只'//获奖描述
                },
                ……]

Event

事件名说明参数
endPrize点击抽奖按钮时触发true

注意:

1, 传入的奖品数目应与传入奖品列表的长度一致。

2, 传入圆盘背景图的分割线应有一条与抽奖按钮指针方向重合,即指向12点方向。

正确的图片方向: wheeltoast

错误的图片方向: wheeltoast

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