【uniapp微信小程序组件】大转盘抽奖组件
大转盘抽奖组件
效果图
一、介绍
使用canvas组件实现大转盘抽奖功能，目前仅测试了微信小程序，请谨慎使用。
二、Api
大转盘抽奖组件具有以下属性和事件：
2.1 bugking7-bigTurntable Props
| 属性名 | 类型 | 必填项 | 默认值 | 说明 |
|---|---|---|---|---|
bigTurntableList
|
Array
|
是 |
[]
|
大转盘所需要展示的奖品数据列表 |
bigTurntableHeight
|
Number
|
否 |
380
|
大转盘组件的高度，单位px
|
bigTurnEndAnimationType
|
Number
|
否 |
0
|
大转盘抽奖停止时的动画效果。0：缓慢停止。1：立即停止。 |
bigTurnTextField
|
String
|
是 | ‘’ |
大转盘展示奖品名称对应bigTurntableList中的属性名。
|
bigTurnIdField
|
String
|
是 | ‘’ |
同上。此字段用来比对中奖结果信息，计算大转盘旋转弧度及最后定格。例：bigTurntableList为[{'text':'周杰伦','id':'zhoujielun'}]，本字段为id。
|
2.2 bugking7-bigTurntable Events
| 事件名称 | 事件说明 | 返回参数 |
|---|---|---|
@bigTurnStart
|
大转盘旋转开始事件 |
{tip: "大转盘开始了"}
|
@bigTurnEnd
|
大转盘旋转结束事件 |
{result:obj,index:1}，result：中奖结果对象数据，index：对象所在的下标
|
三、示例
<bugking7-bigTurntable ref="bigTurn" :bigTurntableList="bigTurntableList" :bigTurnEndAnimationType="1" :bigTurntableHeight="380"bigTurnTextField="text" bigTurnIdField="id" @bigTurnStart="handleStart" @bigTurnEnd="handleEnd">
</bugking7-bigTurntable>export default {data() {return {bigTurntableList: [{"text": "美团外卖红包","id": "mtwm"},{"text": "拼多多优惠券","id": "pddyhq"},{"text": "谢谢参与","id": "xxcy",},{"text": "京东双11红包","id": "jdhb"},{"text": "天猫双11红包","id": "tmhb"},{"text": "拼多多现金红包","id": "pddhb"}],text: ''}},methods: {handleStart(e) {console.log('抽奖开始了', e)const randIndex = this.getRand(0, this.bigTurntableList.length - 1)const resultObj = this.bigTurntableList[randIndex]//模拟网络请求获取抽奖结果信息setTimeout(() => {//此方法通知大转盘抽奖结束了this.$refs.bigTurn.queryBigTurntableResult(resultObj)}, 300)},handleEnd(e) {this.text = e.result.textconsole.log('抽奖结束了', e)},// 获取随机数getRand(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min},}}四、体验小程序
| 微信扫码体验大转盘功能，还有红包可以领取哦！ |
|---|
|
|
五、项目地址
大转盘抽奖组件
【uniapp微信小程序组件】大转盘抽奖组件相关推荐
- 微信小程序实现大转盘抽奖----踩坑之路
微信小程序实现大转盘抽奖----踩坑之路 需求:现在有一个小程序抽奖页面如下,此类抽奖方式为大转盘 思路:由服务端获取抽奖次数和奖品,根据服务端的中奖概率来决定是否中奖,最后利用小程序动画将转盘转起来 ...
- 微信小程序-开心大转盘（圆盘指针）代码分析
大转盘是比较常见的抽奖活动 .以前做过h5的大转盘,最近小程序比较火,客户要求做小程序的大转盘.我们就来分析下代码.先上几个图: 界面效果还是很不错的. 做界面还是比较容易的,只要有前端基础没 ...
- uniapp微信小程序引用标准版交易组件
跳过前期准备,具体可看官方文档: 标准版组件引用 1.引入组件 pages.json "plugins": {"mini-shop-plugin": {&quo ...
- 微信小程序幸运大转盘
废话不多说,直接上代码 <view class="lucky_draw_zp" bindtap="getLucky"> <!-- <im ...
- uniapp - 微信小程序接入腾讯视频播放器功能插件，uniapp开发微信小程序端调用引入并使用腾讯视频播放组件完整全流程（详细示例源码，一键复制开箱即用）
效果图 在uniapp 微信小程序项目中,集成腾讯视频功能插件,实现播放腾讯视频效果,附带详细示例源码及注释, 你可以跟着步骤一步步来,保证几分钟就能快速在uniapp小程序项目中植入腾讯视频功能! ...
- 小程序的大转盘活动怎么做？
日常生活中最常见的抽奖活动莫过于大转盘抽奖了吧,无论线上线下.大转盘抽奖活动具有多样性.并可开展基于粘性维护的活动:跨界营销.会员积分.互动抽奖.红包.优惠等线上线下活动,并能通过连续扫码.会员积分. ...
- vue uniapp 微信小程序 搜索下拉框 模糊搜索
vue uniapp 微信小程序 搜索下拉框 模糊搜索 话不多说 直接贴代码 template <template><view class="index"> ...
- uniapp 微信小程序 选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能 最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
- 微信小程序对接大华摄像头
文章目录 微信小程序对接大华摄像头 1.在app.json中声明 2. 使用插件 3.使用自定义组件: 微信小程序对接大华摄像头 文档地址:https://open.imoulife.com/book ...
- uni-app 微信小程序接入高德SDK
uni-app 微信小程序接入高德SDK 参考文档:https://lbs.amap.com/api/wx/gettingstarted 一.获取高德Key 配置高德key 二.获取高德key的操作步 ...
最新文章
- Bitcoin ABC发布比特币现金升级时间表
- 利用XSLT把ADO记录集转换成XML
- 6.7 程序示例--K-Means-机器学习笔记-斯坦福吴恩达教授
- HDFS的块缓存和访问权限
- iOS 11 UICollectionView顶部出现白色间隔的问题
- asp.net获取服务器信息,Asp.netnbsp;获取服务器信息, 站长资讯平台
- 纳尼？我的Gradle build编译只要1s
- c++ 合并2个txt_多个表达矩阵文件合并
- Entity Framework 4.1 - Code First 指定外键名称
- Eclipse调试：改变颜色， 背景与字体大小 和xml字体调整
- matlab自适应滤波器 LMS算法
- 机械臂模糊PID控制matlab仿真
- 第三十一章 与昔一何殊勇怯（一之全）
- 比赛打不好怎么办——怎么制定NOI赛制的考试策略
- elasticsearch 性能优化
- 几个图像缩放算法的比较
- 超实数探索浪潮波及中国数学界
- 1+X 云计算平台运维与开发认证（初级）样卷A——附答案
- 小芭比linux怎么装win7_Linux系统怎么安装Win7?安装XP或WIN7系统教程
- GB28181实现摄像头网页无插件直播、回放过程中设备状态分析