uniapp九宫格抽奖

最近写uniapp的九宫格跑马灯抽奖！！！ 一开始没什么思路，，看了之后的大佬文章原来很简单！！！

核心思路：就是 动态的 i++ 改变下标再加上动态类名，以及定时器

直接看效果图上代码~！！1

 

 1、先定义html 

<div class="rotary_table">

    <div v-for="(item, index) of awards" :key="index">

      <div

        class="award"

        :class="['award' + index, { active: index == current }]"

      >

        {{ item.name }}

      </div>

      <van-button

        id="start-btn"

        :disable="disable"

        type="primary"

        @click="start()“

      ></van-button>

      <!-- <el-button disable id="start-btn" @click="start()"></el-button> -->

    </div>

  </div>

2、样式这里使用的是绝对定位

.rotary_table {

  width: 621px;

  height: 621px;

  position: relative;

  margin: 20px auto;

}

.award {

  width: 179px;

  height: 179px;

  text-align: center;

  float: left;

  position: absolute;

  overflow: hidden;

  background: pink;

}

.active {

  background-color: #fffea5 !important;

}

.ward0 {

  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('../assets/cj_xz.png') no-repeat center/100%;

}

3、赋给他们初始值

   awards: [

        { id: 1, name: 10 },

        { id: 2, name: 100 },

        { id: 3, name: 2 },

        { id: 4, name: 1 },

        { id: 5, name: 5 },

        { id: 6, name: '石头今天学习了吗' },

        { id: 7, name: 0 },

        { id: 8, name: 5 }

      ],

 　　timer: null, 

      time: 0, // 当前的时间戳

      award: {}, // 后端返回来的抽中的奖品

      speed: 200,

      diff: 15,

      current: 0, // 当前的索引值

      noClick: true   这儿是加了一个过度点击 还是存在一点问题

4、函数

methods: {

  // 点击抽奖

 start() {

      this.getLottery()

      this.time = Date.now()

    },

 // 调接口获取奖品

    getLottery() {

      this.award.name = '恭喜石头学了25个小时'

      this.award.id = 6

      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(() => {

              alert(`恭喜${this.award.name}`)

            }, 0)

            return

          } else {

            // 若抽中的奖品不存在，则加速转动

            this.speed -= this.diff

          }

        }

        this.move()

      }, this.speed)

    }

}

 

 

小白第一篇博客 欢迎大佬指正！！ 觉得写得好给个点赞，谢谢~~·