react实现九宫格抽奖 - h5

最新推荐文章于 2023-03-28 23:42:24 发布

@胡涂涂

最新推荐文章于 2023-03-28 23:42:24 发布

阅读量1.2k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_16726735/article/details/121405662

版权

本文介绍如何使用React创建一个九宫格或12宫格的抽奖功能，包括无限循环滚动获奖名单的实现。关键点包括：点击开始后初始化数据、setTimeout配合handlePlay事件实现持续移动、注意在定时器中设置条件避免不必要的回调，以及利用CSS3动画实现平滑的滚动效果。

摘要由CSDN通过智能技术生成

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)
  };
  setShuffle (dataList, data=[]) {
    let n = dataList.length
    while (n) {
      let idx = Math.floor(/*Math.random() **/ n--)
      data.push(...dataList.splice(idx))
    }