更新记录
1.0.0(2024-10-10)
下载此版本
1.0.0
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
× |
× |
× |
√ |
× |
× |
× |
× |
dengbo-lotteryWheel 组件
dengbo-lotteryWheel 是一个用于创建抽奖转盘的 uniapp 组件。它提供了一个可自定义的转盘界面,支持动画效果和奖品展示。
属性
属性名 |
类型 |
默认值 |
描述 |
prizeList |
Array |
[] |
奖品列表,每个奖品对象应包含 icon 和 name 属性 |
rotateTime |
Number |
5 |
转盘旋转时间(秒) |
rotateDeg |
Number |
0 |
转盘旋转的角度 |
事件
事件名 |
描述 |
rotateEnd |
转盘停止旋转时触发 |
示例
使用方法
<template>
<view class="content">
<view class="lottery">
<dengbo-lotteryWheel :prizes="prizes" :size="626" :duration="5000" @run="Click"
@done="Done" 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);
},
Click() {
console.log('用户点击了转盘');
this.$refs.luckyWheel.run(2);
},
Done(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>
注意事项
- 确保
prizeList
中的奖品数量与组件中的扇形数量匹配。
rotateDeg
决定了转盘最终停止的位置,您可以根据需要计算这个值以控制中奖结果。
- 可以通过修改组件的 CSS 来自定义转盘的外观。