vue 中实现九宫格抽奖
上一篇说道大转盘抽奖,今天来说说九宫格抽奖
实现原理:
1.将奖品按照抽奖转动的顺序通过css去定位
2.通过索引控制一个高亮的类名,来实现跑马灯的效果
3.一般这种跑马灯转动是有速度的转变效果,先快后慢,最后停止,要实现这个效果,可以在一个定时器内进行操作
实现代码:
1.HTML:
<template> <div class="main_container"> <div class="turntable_box"> <ul id="rotary_table"> <li v-for="(item, index) in awards" :key="index" :class="['award' + index, { active: index == current }]" class="award" > <img :src="require(`@/assets/images/nineSquaredPaper/${item.name}.png`)" alt /> <div class="mask" v-if="index == current"></div> </li> <div id="start-btn" @click="start"></div> </ul> </div> </div> </template>
2.js
<script> import { Toast } from "vant"; export default { name: "nineSquaredPaper", data() { return { awards: [ // 图片名字与ID { id: 1, name: 10 }, { id: 2, name: 100 }, { id: 3, name: 2 }, { id: 4, name: 1 }, { id: 5, name: 5 }, { id: 6, name: 50 }, { id: 7, name: 0 }, { id: 8, name: 5 } ], current: 0, // 当前索引值 speed: 200, // 时间->速度 diff: 15, // 基数 award: {}, // 抽中的奖品 time: 0, // 当前时间戳 timer: null, // 定时器 }; }, methods: { // 开始抽奖 start() { // 开始抽奖 this.getLottery(); this.time = Date.now(); this.speed = 200; this.diff = 12; }, // 调接口获取奖品 getLottery() { this.award.name = "5"; this.award.id = 5; this.move(); }, // 开始转动 move() { this.timer = setTimeout(() => { this.current++; if (this.current > 7) { this.current = 0; } // 若抽中的奖品id存在,则开始减速转动 if (this.award.id && (Date.now() - this.time) / 1000 > 2) { this.speed += this.diff; // 转动减速 // 若转动时间超过4秒,并且奖品id等于小格子的奖品id,则停下来 if ( (Date.now() - this.time) / 1000 > 4 && this.award.id == this.awards[this.current].id ) { clearTimeout(this.timer); setTimeout(() => { Toast(`恭喜中奖${this.award.name}元`); }, 0); return; } } else { // 若抽中的奖品不存在,则加速转动 this.speed -= this.diff; } this.move(); }, this.speed); }, } }; </script>
3.css
<style lang="less" scoped> @white: #f4f4f4; .main_container { width: 100%; min-height: 100%; background-color: #fb6010; background-size: 100% auto; background-repeat: no-repeat; font-size: 26px; // 作用: 禁用弹窗里的滑动影响页面滑动 &.prohibit { width: 100%; height: 100%; overflow: hidden; } // 设置占位符字体颜色 input::-webkit-input-placeholder { color: #a4a5a6; font-size: 26px; } padding: 100px 0px; .turntable_box { margin: 0 auto; padding-top: 160px; width: 90%; height: 850px; background: url("./upload/vphonor/201907/03/636977646730324602.png") no-repeat center/100%; #rotary_table { width: 621px; height: 621px; position: relative; margin: 20px auto; // background-color: antiquewhite; .award { width: 179px; height: 179px; text-align: center; float: left; position: absolute; overflow: hidden; img { position: absolute; width: 179px; top: 0; left: 0; height: 179px; } &.active { .mask { width: 179px; height: 179px; position: absolute; border-radius: 10px; background-color: #fff0bd; opacity: 0.6; } } &.award0 { top: 21px; left: 21px; } &.award1 { top: 21px; left: 221px; } &.award2 { top: 21px; right: 21px; } &.award3 { top: 221px; right: 22px; } &.award4 { bottom: 22.5px; right: 22px; } &.award5 { bottom: 22.5px; right: 221px; } &.award6 { bottom: 22.5px; left: 21px; } &.award7 { top: 221px; left: 21px; } } #start-btn { position: absolute; width: 179px; height: 179px; top: 221px; left: 221px; border-radius: 50%; text-align: center; background: url("./upload/vphonor/201907/03/636977647277486249.png") no-repeat center/100%; } } } } </style>
核心代码->move函数
- 核心代码就是move函数,整个函数在一个定时器中,通过current 索引值变化,实现转动效果
- 由于每次只跳动一步,需要在move函数中回调自身,达到连续跑动效果
- 当满足时间超多4s && 抽中奖品值匹配时,清除定时器,弹提示语
- 加减速是通过speed值控制的,同事他也是定时器中设置的 等待的时间值,值越大,等待越久,就越慢;反之越快