nw-prize-wheel

nw-prize-wheel

转盘抽奖组件

使用

import引入

$ npm install nw-prize-wheel
//or
yarn add nw-prize-wheel

首先安装nw-prize-wheel组件，然后通过import的方式引入

import PrizeWheel from 'nw-prize-wheel';

var prizeWheel = new PrizeWheel('#J_Rotate', {
    prizeQueue: [1, 3, 4, 2]
});

script标签嵌入

下载nw-prize-wheel/lib/index.js，通过script标签直接引入打包好的文件

<script src="./lib/index.js"></script>
<script type="text/javascript">
    var prizeWheel = new PrizeWheel('#J_Rotate', {
        prizeQueue: [1, 3, 4, 2]
    });
</script>

旋转到指定奖项

prizeWheel.rotateTo(1, function(){console.log("callback")})

测试demo详情见nw-prize-wheel/samples文件夹下

PrizeWheel

PrizeWheel是一个转盘抽奖组件，详细接口如下所示

Kind: global class
See: 源码
Author: SherryWu

• PrizeWheel
  • new PrizeWheel(rotateSelector, config)
  • .rotateTo(prize, callback)
  • .stopRotate()

new PrizeWheel(rotateSelector, config)

Param	Type	Description
rotateSelector	string	将要旋转的元素对应的选择器
config	Object	转盘的相关配置
config.prizeQueue	Array.<string> | Array.<number>	奖项队列: 顺时针方向，从指针初始位置右侧开始，若指针初始在一个奖项扇区内，则从该奖项开始 @required
config.inSector	boolean	指针初始位置是否在扇区内：false(Default)、true
config.rotator	string	旋转元素: 'pointer'(Default) - 指针旋转、'wheel' - 转盘旋转
config.turns	number	旋转圈数: 10(Default) - 任意正整数
config.duration	number	旋转时间: 3000(Default) - 单位毫秒

prizeWheel.rotateTo(prize, callback)

旋转到奖品对应位置

Kind: instance method of PrizeWheel

Param	Type	Description
prize	string | number	中的奖项
callback	function	中奖动效结束后的回调方法

prizeWheel.stopRotate()

停止旋转，中断抽奖

Kind: instance method of PrizeWheel