微信小程序抽奖转盘v1.1(更新圈数控制和速度控制)

为满足业务需求,本项目提供一个基于天猫风格的抽奖转盘组件,已解决原版设定结果困难、代码混乱等问题。组件可在项目中直接引用,需设定中奖结果及图片,支持自定义转速和圈数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

因业务需要一个抽奖大转盘,时间紧迫就去网上找了一个仿天猫的抽奖转盘。但是发现他有很多问题,例如无法设定结果,代码混乱等。我的这个是在他基础之上修改,原帖地址找不到了。。。

github:https://github.com/scorpioLh/turnplate

效果图:

 

使用方式,先从git上下载components内的turnplate组件放入您的项目中,然后引入:

<v-turnplate winningResult="{{winningResult}}" prizeImgs="{{prizeImgs}}" bind:turnResultCallBack="lotteryResult" />

必需字段:

winningResult: Number 中奖结果 从左上角第一位是1开始,顺时针1 2 3 4 5 6 7 8 ,总共8个中奖号,其他数字无效

prizeImgs: Array 中奖图片数字,从左上角第一位开始顺时针排列,如非8张图片地址组成的数组则无效

非必需字段:

turnResultCallBack: 抽奖结束时的回调

times: Number 转盘转的圈数,默认3圈

speed: Number 移动速度,毫秒为单位,默认100

 

有兴趣的朋友可以持续关注哦,接下来会更新颜色修改或主题定制等。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值