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 {
   100%;
  min-height: 100%;
  background-color: #fb6010;
  background-size: 100% auto;
  background-repeat: no-repeat;
  font-size: 26px;
  // 作用: 禁用弹窗里的滑动影响页面滑动
  &.prohibit {
     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;
     90%;
    height: 850px;
    background: url("./upload/vphonor/201907/03/636977646730324602.png")
      no-repeat center/100%;
    #rotary_table {
       621px;
      height: 621px;
      position: relative;
      margin: 20px auto;
      // background-color: antiquewhite;
      .award {
         179px;
        height: 179px;
        text-align: center;
        float: left;
        position: absolute;
        overflow: hidden;
        img {
          position: absolute;
           179px;
          top: 0;
          left: 0;
          height: 179px;
        }
        &.active {
          .mask {
             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;
         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函数

1. 核心代码就是move函数,整个函数在一个定时器中,通过current 索引值变化,实现转动效果
2. 由于每次只跳动一步,需要在move函数中回调自身,达到连续跑动效果
3. 当满足时间超多4s && 抽中奖品值匹配时,清除定时器,弹提示语
4. 加减速是通过speed值控制的,同事他也是定时器中设置的 等待的时间值,值越大,等待越久,就越慢;反之越快