react实现九宫格抽奖 - h5

 react实现九宫格，12宫格抽奖。效果图：  功能：抽奖   无线循环滚动获奖名单

（以下完整代码，可直接放在react项目中查看效果。如果用在项目中，还需根据项目需求进行调整）

jsx代码

import { Component } from "react";
import './index.scss'
class RrawLotteryRaffle extends Component{
  constructor(props) {
    super(props);
    this.state = {
			num: 12, // 九宫格：8   12宫格：12
      allAwards: [],
      count: 0,
      times: 100,
      timer: null,
      nowTime: null,
      awardsId: null,
      isRolling: false,
			trophy: null,//奖品
			visible: false, //控制弹窗
      awardsSetting: [
				{
					id: 1,
					awardTitle: '1元优惠券'
				},{
					id: 2,
					awardTitle: '2元优惠券'
				},{
					id: 3,
					awardTitle: '3元优惠券'
				},{
					id: 4,
					awardTitle: '4元优惠券'
				},{
					id: 5,
					awardTitle: '5元优惠券'
				},{
					id: 6,
					awardTitle: '6元优惠券'
				},{
					id: 7,
					awardTitle: '7元优惠券'
				},
			],
			winnerList: [
				{
					name: '张***三1',
					awards: '10元优惠券'
				},{
					name: '张***三2',
					awards: '10元优惠券'
				},{
					name: '张***三3',
					awards: '10元优惠券'
				},{
					name: '张***三4',
					awards: '10元优惠券'
				},{
					name: '张***三5',
					awards: '10元优惠券'
				},{
					name: '张***三6',
					awards: '10元优惠券'
				},{
					name: '张***三7',
					awards: '10元优惠券'
				},
			],
      losingLottery: [{
        id: 1001,
        awardTitle: '谢谢惠顾！'
      }],
    };
    this.handleBegan = this.handleBegan.bind(this)
    this.decelerate = this.decelerate.bind(this)
    
  };

  /***
   * 设置奖项：奖项数量不够时补充谢谢惠顾
   * @param awards  奖项
   * @param none  谢谢惠顾奖项
   */
  setAwards (awards, none) {
    let arr = []
    if (awards.length < this.state.num + 1 ) {
      let i = 0
      while (i < this.state.num - awards.length + 1) {
        arr.push(...none)
        i++
      }
      
    }
		this.setState({
			allAwards: this.setShuffle(arr.concat(awards))
		})
		console.log(this.state.allAwards,88888888)
  };