vue实现轮播抽奖

Vue实现轮播抽奖功能

轮播抽奖是一种常见的互动效果，可以通过Vue结合CSS动画和JavaScript逻辑实现。以下是实现步骤和代码示例：

基础结构搭建

创建Vue组件，定义奖品列表和当前选中项：

<template>
  <div class="lottery-container">
    <div class="prize-list">
      <div 
        v-for="(prize, index) in prizes" 
        :key="index" 
        :class="{ active: index === currentIndex }"
      >
        {{ prize.name }}
      </div>
    </div>
    <button @click="startLottery">开始抽奖</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prizes: [
        { name: '奖品1' },
        { name: '奖品2' },
        { name: '奖品3' },
        { name: '奖品4' },
        { name: '奖品5' },
        { name: '奖品6' },
      ],
      currentIndex: 0,
      isRolling: false
    }
  }
}
</script>

动画效果实现

添加CSS实现轮播动画效果：

.prize-list {
  display: flex;
  overflow: hidden;
  width: 300px;
  height: 60px;
  border: 1px solid #ddd;
}

.prize-list div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.active {
  background-color: gold;
  font-weight: bold;
}

抽奖逻辑实现

在Vue组件中添加抽奖逻辑：

methods: {
  startLottery() {
    if (this.isRolling) return;
    this.isRolling = true;

    const totalRolls = 30; // 总滚动次数
    let rolls = 0;
    const speed = 100; // 初始速度

    const roll = () => {
      rolls++;
      this.currentIndex = (this.currentIndex + 1) % this.prizes.length;

      // 逐渐减速
      const currentSpeed = speed + rolls * 10;

      if (rolls < totalRolls) {
        setTimeout(roll, currentSpeed);
      } else {
        this.isRolling = false;
        alert(`恭喜获得: ${this.prizes[this.currentIndex].name}`);
      }
    };

    roll();
  }
}

高级优化方案

实现可配置的抽奖参数和更平滑的动画：

data() {
  return {
    // ...其他数据
    config: {
      minSpeed: 300,  // 最小间隔(ms)
      maxSpeed: 50,   // 最大间隔(ms)
      totalRolls: 30, // 总滚动次数
      stopIndex: 3    // 最终停止位置(示例)
    }
  }
}

methods: {
  startLottery() {
    // ...检查是否正在滚动

    let rolls = 0;
    const roll = () => {
      rolls++;
      this.currentIndex = (this.currentIndex + 1) % this.prizes.length;

      // 动态计算速度
      const progress = Math.min(rolls / this.config.totalRolls, 1);
      const speed = this.config.minSpeed - 
                   (this.config.minSpeed - this.config.maxSpeed) * 
                   Math.pow(progress, 2);

      if (rolls < this.config.totalRolls) {
        setTimeout(roll, speed);
      } else {
        // 精确停在指定位置
        while (this.currentIndex !== this.config.stopIndex) {
          this.currentIndex = (this.currentIndex + 1) % this.prizes.length;
        }
        this.isRolling = false;
      }
    };

    roll();
  }
}

服务端集成方案

实际项目中通常需要从服务器获取中奖结果：

methods: {
  async startLottery() {
    try {
      const result = await axios.get('/api/lottery');
      this.config.stopIndex = this.prizes.findIndex(
        p => p.id === result.data.prizeId
      );
      this.rollAnimation();
    } catch (error) {
      console.error('抽奖失败', error);
    }
  },

  rollAnimation() {
    // 动画逻辑同上
  }
}

以上实现方案可以根据实际需求进行调整，包括奖品数量、动画速度、中奖概率等参数。对于更复杂的效果，可以考虑使用第三方动画库如GSAP来增强视觉效果。