更新记录

1.0.0（2026-07-08） 下载此版本

• 初始版本发布
• Canvas 绘制转盘，支持自定义颜色、文字、分隔线
• 支持自定义转盘图、背景图、指针图
• 内置默认指针样式和装饰灯环动画
• CSS transition 缓出旋转动画
• 支持外部调用 startSpin() 和 reset()

平台兼容性

uni-app(5.14)

long-turntable 长转盘组件

可定制的抽奖转盘组件，转盘旋转、指针静止，纯 CSS 扇形绘制，支持图片、权重概率等。

特性

• 🎯 转盘旋转：转盘转动选奖，指针固定在顶部
• 🎨 CSS 扇形：纯 CSS conic-gradient 绘制，无 Canvas 依赖
• 🖼️ 奖品图片：支持在每个扇区文字下方显示图片
• ⚖️ 权重概率：每项 weight 控制中奖概率，设为 0 则该奖项永不中
• 🎪 流畅动画：CSS transition 缓出动画
• 💡 跑马灯环：可开关的装饰灯效，灯点颜色可自定义
• 📱 多端兼容：H5 / App / 微信小程序等

基础用法

<template>
  <long-turntable
    :prize-list="prizes"
    @finish="onFinish"
  />
</template>

<script>
export default {
  data() {
    return {
      prizes: [
        { name: '谢谢参与', color: '#8B8B8B', weight: 30 },
        { name: '8.8折',    color: '#FF6B6B', weight: 20 },
        { name: '600元',    color: '#FFA502', weight: 3  },
        { name: '1元',      color: '#FFD93D', weight: 15 },
        { name: '首单半价',  color: '#6BCB77', weight: 5  },
        { name: '400元',    color: '#E056A0', weight: 0  }
      ]
    }
  },
  methods: {
    onFinish(e) {
      uni.showToast({ title: '恭喜获得：' + e.prize.name, icon: 'none' })
    }
  }
}
</script>

带图片的奖品

<long-turntable
  :prize-list="prizes"
  :label-img-size="80"
/>
<!-- prizes 中的图片项 -->
{ name: '600元', color: '#FFA502', image: 'https://x.com/icon.png' }

自定义外观

<long-turntable
  :prize-list="prizes"
  :size="700"
  text-color="#FFFFFF"
  :font-size="28"
  pointer-text="抽"
  pointer-color="#FFFFFF"
  center-color="linear-gradient(135deg, #FF6B6B, #EE5A24)"
  center-text-color="#FFFFFF"
  outer-color="linear-gradient(135deg, #5A4AD8, #8B7FE8)"
  lamp-color="#FFE066"
  lamp-on-color="#FFD700"
  :show-lamps="true"
/>

外部控制（服务端返回中奖结果）

<template>
  <long-turntable ref="tt" :prize-list="prizes" @finish="onFinish" />
  <button @click="spin">抽奖</button>
</template>

<script>
export default {
  methods: {
    async spin() {
      // 请求服务端获取中奖索引
      const res = await uni.request({ url: '/api/lottery' })
      this.$refs.tt.startSpin(res.data.index)
    },
    onFinish(e) {
      console.log('中奖:', e.index, e.prize.name)
    }
  }
}
</script>

Props

prizeList 字段说明

Events

方法 (ref)