更新记录
1.0.1(2024-07-29) 下载此版本
增加isPointerAni/pointerColor装饰点相关的配置
1.0.0(2024-07-28) 下载此版本
新增
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | √ | - | - | - |
hbxw-wheel-lottery组件
介绍
纯css实现的转盘抽奖组件,通过修改配置可以生成自己满意的抽奖转盘
使用示例
推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。
<template>
<view class="container">
<hbxw-wheel-lottery
:list="list"
:prizeItem="prize"
@luckStart="luckStart"
@luckEnd="luckEnd"
/>
<hbxw-wheel-lottery
:list="list"
:prizeItem="prize0"
:itemColor="['red','blue']"
borderColor="yellow"
:btnTextStyle="{color: 'yellow'}"
:itemTextStyle="{color: 'yellow'}"
@luckStart="luckStart0"
@luckEnd="luckEnd"
/>
</view>
</template>
<script>
export default {
data() {
return {
prize: null,
prize0: null,
list: [
{
name: '奖品0',
id: 0,
image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品0'
},
{
name: '奖品1',
id: 1,
image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品1'
},
{
name: '奖品2',
id: 2,
image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品2'
},
{
name: '奖品3',
id: 3,
image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品3'
},
{
name: '奖品4',
id: 4,
image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品4'
},
{
name: '奖品5',
id: 5,
image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品5'
},
{
name: '奖品6',
id: 6,
image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品6'
},
{
name: '奖品7',
id: 7,
image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品7'
},
{
name: '奖品8',
id: 8,
image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品8'
},
{
name: '奖品9',
id: 9,
image: 'https://placehold.jp/999999/ffffff/120x120.png?text=奖品9'
},
]
}
},
methods: {
luckStart() {
setTimeout(() => {
this.prize = this.list[4];
}, 2000)
},
luckStart0() {
setTimeout(() => {
this.prize0 = this.list[6];
}, 3000)
},
luckEnd(e) {
if (e.result && e.status) {
uni.showToast({
title: `恭喜抽中${e.result.name}`,
icon: 'none',
})
}
setTimeout(() => {
e.reset();
}, 2000);
}
},
mounted() {
console.log('---- storage_key ----:', uni.getStorageSync('storage_key'), typeof uni.getStorageSync('storage_key'));
}
}
</script>
<style lang="scss" scoped>
.container{
display: flex;
flex-direction: column;
align-items: center;
}
</style>
API
Props
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
list | Array | null | 是 | 当前要抽奖数据 |
prizeItem | Number/Object | 300 | 是 | 当前中奖数据 |
radius | Number/String | 325 | 否 | 转盘半径 |
disabled | Boolean | false | 否 | 当前是否是禁用抽奖状态 |
delay | Number | 5 | 否 | 最多等待多少s,转到这个秒数如果发现还没有检查到中奖奖品数据,即判定为抽奖失败 |
itemColor | Array | ['#f38181', '#393e46'] | 否 | 转盘奖品区是间隔颜色 |
itemTextStyle | Object | {} | 否 | 奖品项的文本样式 |
borderColor | String | #FFBE04 | 否 | 转盘最外层圆边颜色 |
btnRadius | Number/String | 84 | 否 | 抽奖按钮半径 |
btnText | String | 点击抽奖 | 否 | 抽奖按钮文案 |
btnTextStyle | Object | {} | 否 | 抽奖按钮文本样式 |
btnColor | Array | ['#ff2e63', '#FFBE04'] | 否 | 抽奖按钮背景色和边框色 |
isPointerAni | Boolean | true | 否 | 是否开启装饰点闪烁动画 |
pointColor | Array | ['white', #ff2e63'] | 否 | 装饰点颜色,二个颜色切换 |
Event
事件名 | 说明 | 返回值 |
---|---|---|
luckStart | 抽奖开始触发的事件,主要是给使用默认UI用的,用于外面触发抽奖接口获取抽奖奖品 | 无 |
luckEnd | 抽奖结束触发的事件 | 抽奖结果对象{ result: 抽奖结果, status: 抽奖状态 ok成功/error失败, reset: 抽奖重置方法爆露,用于外面重置抽奖 } |
注:包体积偏大是因为有示例图片,真正会打包到项目中的体积是很小的