当前位置：首页 > news >正文

Uniapp+Vue3+Ts+Unocss实现小程序、APP、H5的大转盘抽奖效果

news 2024/11/14 11:03:54

实现uniapp全端的大转盘抽奖效果

背景：uniapp的插件市场的插件要么就不支持Vue3版本，或者无法APP的支持
考虑使用过 lucky-canvas这玩意，发现不支持app

功能列表

支持自定义奖品列表
支持两种抽奖转动方式（轮盘转动或者指针转动）
自定义抽奖概率

效果截图

app2. h5

详细代码

<route lang="json5" type="page">
{layout: 'default',style: {navigationBarTitleText: '抽奖中心',},
}
</route>
<template><!-- 外层圆居中 --><view class="center flex-col"><!-- 每个扇形对应的矩形 --><div class="h-200rpx"></div><view class="center position-relative flex-col"><view:class="`position-relative border-rd-50% w-540rpx h-540rpx overflow-hidden transition-all transition-duration-500 transition-ease transition-property-all ${mode == PanelType.CircleSpin ? start : ''} `"><viewv-for="(item, index) in prizeList":key="index"class="position-absolute left-50% top-0 bg-blue h-270rpx":style="{width: width,transformOrigin: 'center bottom',transform: `translateX(-50%) rotate(${-anglePerPrize * index}deg)`,'clip-path': 'polygon(0% 0%, 100% 0%, 50% 100%)',backgroundColor: index % 2 == 0 ? '#FFE7BA' : '#FFD096',}"><!-- 添加扇形里的元素 --><view class="text-center mt-20rpx font-size-24rpx color-#B84B2B mb-20rpx"><text>{{ item.name }}</text></view><view class="text-center" v-show="item.small_image"><image class="w-72rpx h-72rpx" :src="item.small_image" mode=""></image>