当前位置：首页 > uni-app

uniapp实现抽奖

2026-03-05 08:06:05uni-app

实现抽奖功能的基本思路

在UniApp中实现抽奖功能通常需要结合前端动画和随机算法。抽奖的核心逻辑包括奖品配置、随机选择奖品、动画效果以及结果展示。

奖品配置

定义一个奖品数组，包含奖品名称、图片、中奖概率等信息。概率可以设置为权重或百分比。

uniapp实现抽奖

const prizes = [
  { name: '一等奖', image: '/static/prize1.png', weight: 1 },
  { name: '二等奖', image: '/static/prize2.png', weight: 5 },
  { name: '三等奖', image: '/static/prize3.png', weight: 10 },
  { name: '谢谢参与', image: '/static/prize4.png', weight: 84 }
]

随机算法实现

使用加权随机算法根据奖品权重随机选择中奖结果。先计算总权重，再生成随机数确定中奖项。

function getRandomPrize(prizes) {
  let totalWeight = prizes.reduce((sum, prize) => sum + prize.weight, 0)
  let random = Math.random() * totalWeight
  let weightSum = 0

  for (let prize of prizes) {
    weightSum += prize.weight
    if (random <= weightSum) return prize
  }
}

转盘动画实现

使用CSS动画或JavaScript实现转盘旋转效果。可以设置初始速度、减速时间和最终停止位置。

uniapp实现抽奖

<view class="turntable" :style="{ transform: `rotate(${rotateDegrees}deg)` }">
  <!-- 奖品扇形区域 -->
</view>

data() {
  return {
    rotateDegrees: 0,
    isRotating: false
  }
},
methods: {
  startLottery() {
    if (this.isRotating) return
    this.isRotating = true

    // 基础旋转圈数
    const baseRotations = 5
    // 随机决定最终奖品位置
    const prizeIndex = Math.floor(Math.random() * prizes.length)
    const segmentAngle = 360 / prizes.length
    const targetAngle = 360 * baseRotations + (segmentAngle * prizeIndex)

    // 使用CSS transition实现平滑旋转
    this.rotateDegrees = targetAngle
    setTimeout(() => {
      this.isRotating = false
      this.showPrizeResult(prizes[prizeIndex])
    }, 5000) // 动画持续时间
  }
}

结果展示与交互

抽奖结束后显示中奖结果，并提供再次抽奖按钮。需要注意抽奖次数限制和用户交互反馈。

<view class="result-modal" v-if="showResult">
  <image :src="resultPrize.image"></image>
  <text>{{ resultPrize.name }}</text>
  <button @click="closeResult">确定</button>
</view>