溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

基于React.js如何實現(xiàn)兔兔牌九宮格翻牌抽獎組件

發(fā)布時間:2023-01-13 10:09:38 來源:億速云 閱讀:118 作者:iii 欄目:開發(fā)技術(shù)

這篇文章主要介紹了基于React.js如何實現(xiàn)兔兔牌九宮格翻牌抽獎組件的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇基于React.js如何實現(xiàn)兔兔牌九宮格翻牌抽獎組件文章都會有所收獲,下面我們一起來看看吧。

基礎(chǔ)頁面結(jié)構(gòu)

import React, { useEffect, useState } from "react"
import './index.css'

const FlopLuckyDraw9 = () => {

  return (
    <>
      <div className="title">
        可抽獎
        <label >{count}</label>
        次
      </div>
      <div className="box">
        {
          list.map((item) => {
            return (
              <div className="item" key={item.id}>
                <div className={`style1`}>抽獎</div>
                <div className={`style2`}>{item.name}</div>
              </div>
            )
          })
        }
      </div>
    </>
  )
}

export default FlopLuckyDraw9

初始化數(shù)據(jù)

import React, { useEffect, useState } from "react"
import './index.css'

const data = [
  { id: 1, name: '1元優(yōu)惠券' },
  { id: 2, name: '10元優(yōu)惠券', },
  { id: 3, name: '謝謝惠顧' },
  { id: 4, name: '豪華電動車' },
  { id: 5, name: '1w購物券' },
  { id: 6, name: '5w購物券' },
  { id: 7, name: '豪華轎車' },
  { id: 8, name: '房子一套' },
  { id: 9, name: '頂配筆記本' }
]

const FlopLuckyDraw9 = () => {
  const [count, setCount] = useState(3)
  const [list, setList] = useState([])

  useEffect(() => {
    setList(data.map((i) => {
      return {
        ...i,
        showName: false,
        showResult: false
      }
    }))
  }, [])

  return (
    <></>
  )
}

export default FlopLuckyDraw9

翻轉(zhuǎn)邏輯

點擊 item 時,將 showName 變?yōu)?true,改變類名,實現(xiàn)翻轉(zhuǎn)效果。

const FlopLuckyDraw9 = () => {

  const handleClick = (item) => {
    setList(list.map((i) => {
      if (i.id === item.id) {
        return {
          ...i,
          showName: true,
        }
      } else {
        return i
      }
    }))
  }

  return (
    <>
      <div className="box">
        {
          list.map((item) => {
            return (
              <div className="item" onClick={() => handleClick(item)} key={item.id}>
                <div className={`style1 ${item.showName ? 'hide' : null}`}>抽獎</div>
                <div className={`style2 ${item.showName ? 'show' : null}`}>{item.name}</div>
              </div>
            )
          })
        }
      </div>
    </>
  )
}

export default FlopLuckyDraw9

count 為 0

當(dāng) count 為 0 時,將所有的牌全部都翻轉(zhuǎn)出來,同時添加未選中的類名。

const FlopLuckyDraw9 = () => {
  const [count, setCount] = useState(3)

  useEffect(() => {
    setTimeout(() => {
      // 監(jiān)聽 count
      if (count === 0) {
        setList(list.map((i) => {
          if (!i.showName) {
            return {
              ...i,
              showName: true,
              showResult: true
            }
          } else {
            return {
              ...i,
              showName: true,
            }
          }
        }))
      }
    }, 1000);
  }, [count])

  const handleClick = (item) => {
    if (count === 0) {
      return;
    }
    // ....
    setCount(count => count - 1)
  }

  return (
    <>
      <div className="title">
        可抽獎
        <label >{count}</label>
        次
      </div>
      <div className="box">
        {
          list.map((item) => {
            return (
              <div>
                <div className={`style2 ${item.showName ? 'show' : null} ${item.showResult ? 'show-result' : null}`}>{item.name}</div>
              </div>
            )
          })
        }
      </div>
    </>
  )
}

export default FlopLuckyDraw9

100% 中獎

100% 中獎?代碼是自己的,改吧改吧就可以了。

const data = [
  { id: 1, name: '1元優(yōu)惠券', is: true },
  { id: 2, name: '10元優(yōu)惠券', },
  { id: 3, name: '謝謝惠顧', is: true },
  { id: 4, name: '豪華電動車' },
  { id: 5, name: '1w購物券' },
  { id: 6, name: '5w購物券' },
  { id: 7, name: '豪華轎車' },
  { id: 8, name: '房子一套', is: true },
  { id: 9, name: '頂配筆記本' }
].sort(v => Math.random() - 0.5)

const FlopLuckyDraw9 = () => {
  const [winAPrize, setWinAPrize] = useState([])

  const handleClick = (item) => {
    // ...
    const winAPrizeItem = winAPrize.pop()
    setList(list.map((i) => {
      if (i.id === item.id) {
        return {
          ...i,
          showName: true,
          name: winAPrizeItem.name
        }
      } else {
        return i
      }
    }))
    // ...
  }

  useEffect(() => {
    setWinAPrize(data.filter(v => v.is))
  }, [])

  return (
    <></>
  )
}

export default FlopLuckyDraw9

效果圖

基于React.js如何實現(xiàn)兔兔牌九宮格翻牌抽獎組件

基于React.js如何實現(xiàn)兔兔牌九宮格翻牌抽獎組件

關(guān)于“基于React.js如何實現(xiàn)兔兔牌九宮格翻牌抽獎組件”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“基于React.js如何實現(xiàn)兔兔牌九宮格翻牌抽獎組件”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI