更新记录

1.0.0（2025-11-25） 下载此版本

第一个简易版本

平台兼容性

xx-turntable 大转盘

组件名：xx-turntable

大转盘抽奖组件，支持拖动、惯性滚动、吸附功能，可自定义奖品配置、背景样式和指针样式。

快速开始

安装组件

在 HBuilderX 中，通过 uni_modules 市场安装组件或手动将组件放入项目的 uni_modules 目录。

引入组件

在需要使用的页面中引入组件： uni_modules模式 可以无需引入

<script setup>
import { ref, reactive } from 'vue';
import { xxTurntable } from '@/uni_modules/xx-turntable/index.js';

// 组件引用
const turntableRef = ref(null);
</script>

基本使用

<template>
  <view class="demo-container">
    <xx-turntable ref="turntableRef"
      wheelSize="280"
      :prizeCount="8"
      :prizes="prizes"
      @angle-change="handleAngleChange"
      @start="handleStart"
      @end="handleEnd">
      <!-- 自定义奖品背景布局 -->
      <view class="prize-container">
      </view>
    </xx-turntable>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';

const turntableRef = ref(null);

// 基础转盘奖品数据 逆时针
const prizes = [
    '拍立得相机',
    'Switch游戏机',
    '定制马克杯',
    '卡通公仔',
    '手机支架',
    '钥匙扣套装',
    '定制马克杯',
    '300元奶茶券'
];

// 最后抽奖结果
const lastResult = ref('');

// 当前旋转角度
const currentAngle = ref(null);

// 处理抽奖开始事件
const handleStart = () => {
    console.log('抽奖开始');
};

// 处理抽奖结束事件
const handleEnd = () => {
    console.log('抽奖结束');
};

// 处理角度变化事件
const handleAngleChange = (angle) => {
    currentAngle.value = angle;
    console.log('当前角度:', angle);
};

const testStart = () => {
    if(currentAngle.value % 360 !== 0) {
        testReset();
    }
    setTimeout(() => {
        testBasicDraw();
    }, 500);
}

// 测试基础转盘抽奖
const testBasicDraw = async () => {
    if (!turntableRef.value) return;

    try {
        // 随机选择中奖索引
        const prizeIndex = Math.floor(Math.random() * prizes.length);

        // 记录中奖结果
        lastResult.value = prizes[prizeIndex];

        // 旋转到指定奖品
        const res = await turntableRef.value.rotateToPrize(prizeIndex, 6);
        console.log('rotateToPrize res:', res);
        console.log('抽奖完成，获得:', prizes[prizeIndex], prizeIndex);

    } catch (error) {
        console.error('抽奖失败:', error);
    }
};

// 重置转盘
const testReset = () => {
    if (turntableRef.value) {
        turntableRef.value.setAngle(0);
    }

    lastResult.value = '';
    currentAngle.value = null;
    console.log('转盘已重置');
};
</script>

<style scoped>
.demo-container {
  display: flex;
  justify-content: center;
  padding: 30rpx;
}
.prize-container {
  width: 100%;
  height: 100%;
  position: relative;
  /** 转盘背景图片 必要 */
  background-image: url('@/static/turn.png');
}
</style>

属性说明

事件说明

方法说明

注意事项

1. 确保提供的奖品数量与prizeCount属性一致
2. 自定义样式时注意使用正确的选择器优先级
3. 在H5端和小程序端可能存在微小的样式差异，建议进行多端测试

示例演示

完整示例请参考项目中的 pages/turntable-demo/turntable-demo.vue 文件。