nw-squared-lottery
v1.21.4
Published
九宫格抽奖
Downloads
21
Readme
nw-squared-lottery
九宫格抽奖
React组件,支持九宫格、十六宫格、N宫格抽奖。
使用
import引入
$ npm install nw-squared-lottery
//or
yarn add nw-squared-lottery
nw-squared-lottery的props
| Name | Type | Default value | Description | | --- | --- | --- | --- | | instance | object | | (必填)父组件的instance | | count | number | | (必填)奖项个数 | | prizePos | number | | (必填)中奖index | | onRefresh | func | | (必填)每移动一格,调用一次,参数activeIndex | | onFinished | func | | (必填)抽奖结束,参数isSuccess,正常结束true,若中途异常中断,参数为false | | containerClass | string | 'nw-lottery-wrap' | 九宫格所在的容器 | | initCycle | number | 50 | 转动基本次数:即至少需要转动多少次再进入抽奖环节 | | speed | number | 100 | 初始转动速度,单位毫秒 | | slowTimes | number | 11 | 保证减慢的次数 |
父组件可直接调用this..onStart()、this.onAbort()去开始or中断抽奖
示例
在线demo,可以查看https://yaolufe.hz.netease.com/rc/docs/squaredLottery
import React, { Component } from 'react';
import SquaredLottery from 'nw-squared-lottery';
class App extends Component {
constructor(props) {
super(props);
this.lotteryConfig = {
instance: this,
count: 12,
onRefresh: this.onRefresh.bind(this),
onFinished: this.onFinished.bind(this)
}
this.state = {
activeIndex: 0,
prizePos: -1 //中奖index
};
this.startLottery = this.startLottery.bind(this);
}
// 开始抽奖,异步获得prizePos后,通过props传递
startLottery() {
this.onStart();
//this.setState({prizePos: x)})
}
// 更新activeIndex
onRefresh(activeIndex) {
this.setState({activeIndex})
}
// 抽奖结束
onFinished(_isSuccess) {
}
render() {
this.lotteryConfig.prizePos = this.state.prizePos;
return (
<div className="App">
<SquaredLottery {...this.lotteryConfig}>
<table>
<tbody>
<tr>
<td>0</td><td>1</td><td>2</td>
</tr>
<tr>
<td>7</td>
<td>
<a className="btn" href="javascript:;" onClick={this.startLottery}></a>
</td>
<td>3</td>
</tr>
<tr>
<td>6</td><td>5</td><td>4</td>
</tr>
</tbody>
</table>
</SquaredLottery>
<button className="btn-abort" onClick={this.onAbort}>中断</button>
</div>
);
}
}
export default App;