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

scorpio_h

于 2019-02-28 15:16:43 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序抽奖转盘

本文链接：https://blog.youkuaiyun.com/scorpio_h/article/details/88029416

6 篇文章

订阅专栏

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

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

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

效果图：

使用方式，先从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

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