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函數

1. 核心代碼就是move函數,整個函數在一個定時器中,通過current 索引值變化,實現轉動效果
2. 由於每次只跳動一步,需要在move函數中回調自身,達到連續跑動效果
3. 當滿足時間超多4s && 抽中獎品值匹配時,清除定時器,彈提示語
4. 加減速是通過speed值控制的,同事他也是定時器中設置的 等待的時間值,值越大,等待越久,就越慢;反之越快