更新记录
1.0.0(2024-10-10)
下载此版本
1.0.0
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
× |
× |
× |
√ |
× |
× |
× |
× |
dengbo-lotteryGrid
dengbo-lotteryGrid 是一个用于创建抽奖格子游戏的 uniapp 组件。它提供了一个可自定义的抽奖网格,支持不同的行列数、奖品设置和样式定制。
特性
- 支持自定义行数和列数
- 可配置奖品信息和图片
- 可自定义抽奖速度和加速度
- 支持自定义网格项和激活项样式
- 提供开始抽奖和抽奖结束事件
属性
属性名 |
类型 |
默认值 |
描述 |
rows |
Number |
3 |
网格的行数 |
cols |
Number |
3 |
网格的列数 |
minSpeed |
Number |
50 |
最小转动速度(毫秒) |
maxSpeed |
Number |
300 |
最大转动速度(毫秒) |
accelerationRate |
Number |
2 |
加速度率 |
gridItemBg |
String |
'' |
网格项背景图片 |
prizes |
Array |
必填 |
奖品数组,每个奖品对象包含 name 和 image 属性 |
prizeItemStyle |
Object |
{} |
奖品项的自定义样式 |
activeItemStyle |
Object |
{ backgroundColor: '#feca57' } |
激活项的自定义样式 |
事件
事件名 |
参数 |
描述 |
centerButtonClick |
无 |
点击中心按钮时触发 |
lottery-end |
prize |
抽奖结束时触发,返回中奖奖品对象 |
插槽
插槽名 |
描述 |
default |
自定义奖品项内容 |
centerButton |
自定义中心按钮内容 |
注意事项
- 确保提供的奖品数量与网格大小匹配(rows cols - (this.rows-2)(this.cols-2))
- 使用
startLottery
方法时,需要传入最终中奖的索引
示例
<template>
<view class="content">
<view class="lottery">
<image src="/static/lk.png" style="width: 100%; height: 100%"></image>
<view style="
width: 500rpx;
height: 500rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -45%);
">
<dengbo-lotteryGrid ref="lottery" @lottery-end="onLotteryEnd" :prizes="prizes"
:prizeItemStyle="prizeItemStyle" @centerButtonClick="startLottery" gridItemBg="/static/lb.png">
<template v-slot:centerButton>
<view style="width: 100%; height: 100%; position: relative">
<image src="/static/lj.png" style="width: 100%; height: 100%"></image>
<view style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 20%);
font-size: 18rpx;
color: #fee6aa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
">
<view style="white-space: nowrap">10积分/次</view>
<view style="white-space: nowrap">剩余9999积分</view>
</view>
</view>
</template>
</dengbo-lotteryGrid>
</view>
</view>
<view style="margin-top: -64rpx">
<image @click="startLottery" src="/static/lan.png"
style="width: 520rpx; height: 192rpx; position: relative; z-index: 9">
</image>
</view>
<view style="margin-top: -96rpx">
<image src="/static/lt.png" style="width: 670rpx; height: 180rpx"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
prizeItemStyle: {
borderRadius: '5px',
fontWeight: '400',
fontSize: '18rpx',
color: '#EE4F00',
},
prizes: [{
id: 1,
name: '一等奖',
image: '/static/lj.png',
},
{
id: 2,
name: '二等奖',
image: '/static/lj.png',
},
{
id: 3,
name: '三等奖',
image: '/static/lj.png',
},
{
id: 4,
name: '四等奖',
image: '/static/lj.png',
},
{
id: 5,
name: '五等奖',
image: '/static/lj.png',
},
{
id: 6,
name: '六等奖',
image: '/static/lj.png',
},
{
id: 7,
name: '七等奖',
image: '/static/lj.png',
},
{
id: 8,
name: '八等奖',
image: '/static/lj.png',
},
],
}
},
onLoad() {
},
methods: {
startLottery() {
// // 选择一个奖品索引(这里使用随机选择作为示例)
let selectedPrizeIndex = Math.floor(Math.random() * this.prizes.length);
// // 开始抽奖
// this.isLotteryRunning = true;
this.$refs.lottery.startLottery(selectedPrizeIndex);
},
onLotteryEnd(prize) {
console.log(prize)
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.lottery {
margin-top: 100rpx;
position: relative;
display: inline-block;
width: 688rpx;
height: 740rpx;
}
</style>