Запустите простую версию лотереи с сеткой из девяти квадратов на основе React

внешний интерфейс API React.js анимация

Спереди написано, что приближается ежегодное собрание, и спрос, естественно, связан с различными лотерейными розыгрышами. Недавно я только что получил срочный запрос на лотерею Jiugongge, Кстати, давайте запишем процесс этой простой Jiugongge.

Эта статья может включать следующее:

  • Коробка стиля макета
  • Динамический эффект Jiugongge
  • логическая обработка лотереи
  • Совместная отладка интерфейса и сервера

Макет Цзюгунге

Каждый должен быть знаком с Jiugongge, это всего девять сеток, давайте посмотрим на нашу онлайн-лотерею Jiugongge ↓↓

Подождите... в приведенном выше, похоже, нет девяти сеток.(Это демо)

Я думаю, что все знакомы с этой раскладкой, особенно после того, как увидели Жуань Ифэн.Учебное пособие по Flex Layout: примерыДетская обувь не очень сердечная.

Да, наша верстка основана на флексе, и основная идея — разделение вертикальных и горизонтальных элементов.

  • Вся область Jiugongge должна иметь фиксированную ширину и высоту.(На самом деле это не имеет значения)Блочный элемент, располагающий каждую строку по вертикали.
  • Каждая строка — это строка, и мы будем располагать пространство между или вокруг каждого блока элементов в строке (в соответствии с собственным суждением компании).
  • Содержимое в каждом элементе также центрировано по горизонтали с помощью flex, а затем, как восстановить проект дизайна.

встреча с ямой, На самом деле это не яма, это проблема мобильной адаптации.

Это связано с проблемой rem-верстки, в силу некоторых исторических причин наш проект не использует rem-метод для разработки мобильных страниц.

Это причиняет нам много боли при разработке некоторых компонентов, требующих высокой адаптивности. Но недавно, когда писал другие проекты, придумал решение, вполне подходящее для нас, но могут быть какие-то требования к версии браузера и системе мобильного телефона.

@function pxWithVw($n){
  @return 100vw * $n / 375
}

@function pxWithVwMax($n){
  @return 480px * $n / 375
}
@mixin pxVw2width($n) {
  width: pxWithVw($n);
  max-width: pxWithVwMax($n);
}
@mixin pxVw2height($n) {
  height: pxWithVw($n);
  max-height: pxWithVwMax($n);
}

Хотя мы не использовали макет rem, мы все же взяли scss. Заимствуя миксин scss, мы можем легко восстановить различные параметры проекта дизайна. Причина, по которой нам нужно ограничить значение Max, в основном потому, что наш проект поддерживает Сторона ПК.Вид, поэтому его нужно ограничить до предельной ширины.

Вопрос, почему в pxVw2height стоит vw? На самом деле это проблема соотношения пикселей.Отношение ширины в наброске дизайна к ширине устройства в наброске дизайна - это, естественно, отношение каждого пикселя, соответствующего экрану.

Однако в этом писании будет неуверенность, то есть под разными DPR, влияет ли этот метод на восстановление пикселей, в этом я пока не уверен, но все же найду время протестировать.

Динамический эффект Jiugongge и обработка логики лотереи

Понятно, что анимация и лотерейная логика — это разные вещи, но мы разрабатываем в React, и я считаю, что нужно их соединить.

Ядро движения

Триггерным ядром динамического эффекта является изменение activedId в реальном времени.Через таймер activedId в состоянии родительского компонента изменяется в течение определенного интервала времени, чтобы достичь эффекта «dengdengdeng» в девять - квадратная сетка.

class RowItem extends React.Component {
    renderImgClass () {
        switch (this.props.content.raw_name) {
            ...
        }
    }

    render() {
        const { content, activedId } = this.props;
        return (
            <div className={`${activedId === content.id ? 'row__item row__item-active' : 'row__item'}`} id={`row_item_${content.id}`}>
                <img src={content.img} alt="" className={this.renderImgClass()}/>
                {content.name}
            </div>
        )
    }
}

Выше приведен исходный код каждого маленького квадрата, нетрудно увидеть место, где можно решить, как здесь должен отображаться каждый маленький квадрат.

${activedId === content.id ? 'row__item row__item-active' : 'row__item'}

ActivedId, передаваемый через props, определяет, в каком блоке отображать анимацию.Хотя мой Jiugongge не называется динамическим эффектом, но принцип интероперабельный, вы можете просто поместить его в этот компонент, если хотите его показать.

лотерейная логика

Давайте сначала разберем процесс такого розыгрыша лотереи с девятью квадратами и удалим эти различные дополнительные спецэффекты.На самом деле суть состоит в том, чтобы случайным образом (или назначить) идентификатор предмета в качестве выигрышного идентификатора, а затем мы определить, сколько раз цикл обходит этот идентификатор, и, наконец, убедиться, что выигрышная коробка может оставаться на предмете с указанным идентификатором.

Процесс нажатия кнопки розыгрыша лотереи я разделил на две части, одна это определение состояния и обнуление, а другая метод запуска лотереи (на самом деле его тоже можно записать вместе, я привык чтобы разделить его, и я выгляжу более комфортно).

  • handleBeginОтвечает за определение состояния и обнуление
handleBegin() {
    if (!this.state.prizePlaying) {
        this.setState({
            prizePlaying: true
        })
        axios.post(url)
            .then(res => {
                if (res.data.code === 0) {
                    ...
                    axios.get(url2)
                        .then(res => {
                            if (res.data.code === 0) {
                                this.setState({
                                    ...
                                }, () => {
                                    this.setState({
                                        prizeActivedId: '',
                                        prizePrizeId: null,
                                        prizeTimes: 0,
                                        prizeActTimes: 0
                                    }, () => {
                                        this.handlePlay()
                                    })
                                })
                            }
                        })
                } else {
                    ...
                }
            })
    }
}

В начале я сначала определил, выполнен ли текущий статус лотереи.Если запрос не выполнен, запрос завершается, и состояние девятки восстанавливается, а затем выполняется следующий шаг. Что касается восстановления состояния, отдельные люди считают, что это относительно удобный и высокий коэффициент безопасности, конечно, если вы хотите сохранить первоначальный статус лотереи, необходимо обратить внимание на отношения между двумя временами.

  • handlePlayНастоящий метод лотереи
handlePlay() {
    let prize;
    switch (this.state.prizeLottery) {
        prize = ...
    }
    this.setState({
        prizePrizeId: prize,
        prizeActivedId: 0
    })
    let times = this.state.prizeList.length * Math.floor(Math.random() * 5 + 4)
    this.setState({
        prizeTimes: times
    })
    this.begin = setInterval(() => {
        let num;
        if (this.state.prizeActivedId === this.state.prizePrizeId && this.state.prizeActTimes > this.state.prizeTimes) {
            clearInterval(this.begin)
            ...
            this.setState({
                prizePlaying: false
            })
            return
        }
        if (this.state.prizeActivedId === '') {
            num = 0
            this.setState({
                prizeActivedId: num
            })
        } else {
            num = this.state.prizeActivedId
            if (num === 7) {
                num = 0
                this.setState({
                    prizeActivedId: num
                })
            } else {
                num = num + 1
                this.setState({
                    prizeActivedId: num
                })
            }
        }
        this.setState({
            prizeActTimes: this.state.prizeActTimes + 1
        })
    }, 100)
}

Определить выигрышный PrizePrizeId, а затем случайным образом вычислить минимальное количество циклов анимации, затем можно запустить таймер для динамического изменения призаActivedId, и RowItem будет перерендерен с изменением призаPrizeId, что является так называемым «dengdengdeng "Эффект. .

Если вы считаете, что приведенное выше объяснение недостаточно подробное, вы можете найти портал github в конце статьи, который содержит исходный код демо и соответствующие комментарии.

Совместная отладка интерфейса и сервера

Здесь я в основном хочу рассказать о собственном планировании (или идеях) всего проекта перед началом разработки.Исходя из принципа ненадежного фронтенда, мы должны общаться с бэкендом каждый раз, когда запускаем лотерею, ни количество раз, ни окончательный PrizeId не должен быть Это решать переднему концу.

С точки зрения внешнего интерфейса нам, вероятно, понадобятся два интерфейса:

  • ① Интерфейс, похожий на init, который сообщает нам, сколько раз и была ли награда
  • ② Как и в интерфейсе активной лотереи, мы сообщаем серверной части, что здесь инициирована лотерея. После запроса интерфейса ② он возвращает нам приз, а затем мы преобразуем внешний идентификатор в соответствии с возвратом, чтобы можно было завершить относительно полный замкнутый цикл.

Суммировать

В этот раз я записал небольшое требование, которое я сделал за последние два дня, это также моя первая попытка сделать что-то подобное.Я верю, что в ближайшем будущем меня будет ждать большой проигрыватель (улыбается).

Исходный код лотереи Jiugongge DEMO-React, демо, созданное временно с помощью приложения create-react-app, надеюсь, оно поможет, спасибо.

Категории