# uniapp抽奖-转盘

**Repository Path**: BengBo/uniapp-lottery-carousel

## Basic Information

- **Project Name**: uniapp抽奖-转盘
- **Description**: uniapp抽奖-转盘
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2024-10-10
- **Last Updated**: 2025-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dengbo-lotteryWheel 幸运轮盘组件

dengbo-lotteryWheel 是一个功能丰富的幸运轮盘组件，适用于抽奖、游戏等场景。它提供了可自定义的外观和行为，支持动态奖项、闪烁灯效等特性。

## 特性

- 可自定义奖项数量和内容
- 支持自定义轮盘大小和样式
- 动态旋转效果
- 可配置的闪烁灯效
- 支持自定义背景图片
- 响应式设计

## 属性

| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| prizes | Array | 必填 | 奖品列表 |
| size | Number | 600 | 轮盘大小（单位：rpx） |
| customStyle | String | - | 自定义样式 |
| styleOpt | Object | {...} | 样式选项 |
| innerStyle | String | 'width: 85%;height:85%' | 内部样式 |
| turns | Number | 10 | 旋转圈数 |
| duration | Number | 5000 | 旋转持续时间（毫秒） |
| lightNormalSpeed | Number | 1000 | 正常闪光灯速度 |
| lighFastSpeed | Number | 50 | 快速闪光灯速度 |
| lightSize | String | '26rpx' | 闪光灯大小 |
| lightColors | Array | ['#FF0000', '#FFFF00'] | 闪光灯颜色列表 |
| lightImgs | Array | [] | 闪光灯图片列表 |
| prizeBgImages | Array | [] | 扇形背景图数组 |

## 事件

| 事件名 | 参数 | 描述 |
|--------|------|------|
| run | - | 开始抽奖 |
| done | index | 抽奖完成，返回中奖奖品的索引 |

## 插槽

组件提供了以下插槽以便自定义内容：

- `bg`: 自定义轮盘背景
- `pointer`: 自定义指针
- 默认插槽: 自定义每个奖品区域的内容

## 注意事项

- 确保提供的奖品数量与 `prizes` 数组长度一致。
- 如果使用自定义背景图片，请确保图片资源可用。
- 轮盘大小可能需要根据实际设备进行调整。


## 示例
```
<template>
	<view class="content">
		<view class="lottery">
			<dengbo-lotteryWheel :prizes="prizes" :size="626" :duration="5000" @run="onWheelClick"
				@done="onWheelDone" ref="luckyWheel" :lightImgs="lightImages" customStyle="borderRadius: 50%;">
				<template v-slot:bg>
					<image src="/static/tzbj.png" style="width: 100%; height: 100%" />
				</template>
				<template v-slot:pointer>
					<image src="/static/tan.png" style="width: 212rpx" mode="widthFix" @click="startWheel"/>
				</template>
			</dengbo-lotteryWheel>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lightImages: ['/static/tpoint1.png', '/static/tpoint2.png'],
				prizes: [{
						name: '积分',
						image: '/static/thb.png',
						pro: '50积分',
					},
					{
						name: '积分',
						image: '/static/thb.png',
						pro: '100积分',
					},
					{
						name: '优惠券',
						image: '/static/thb.png',
						pro: '15元优惠券',
					},
					{
						name: '家用电器',
						image: '/static/thb.png',
						pro: '微波炉',
					},
					{
						name: '谢谢参与',
						image: '/static/thb.png',
						pro: '15元优惠券',
					},
					{
						name: '办公用品',
						image: '/static/thb.png',
						pro: '机械键盘',
					},
					{
						name: '生活用品',
						image: '/static/thb.png',
						pro: '化妆刷',
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			startWheel() {
				this.$refs.luckyWheel.run(2);
			},
			onWheelClick() {
				console.log('用户点击了转盘');
				this.$refs.luckyWheel.run(2);
			},
			onWheelDone(prize) {
				console.log('抽奖结束，中奖奖品：', prize);
			},
		}
	}
</script>

<style>
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.lottery {
	    position: relative;
	    display: inline-block;
	    width: 626rpx;
	    height: 626rpx;
		margin-top: 100rpx;
	  }
</style>
```