uni-app开发经验分享二十二: uni-app大转盘思路解析
最近在研究uni-app,制作了一个很有意思的集合项目demo,这里给大家分享下大转盘的前端设计思路需求案例:大转盘抽奖
线上demo查看:
案例效果:
制作思路:
前端大转盘使用css3动画来做,在开始做的时候,我思路上碰到一个问题,抽奖结果是我前端给后台还是后台给我,最后我发现,只有后台传结果给前台才能实现代码的数据闭环,那么按照这个思路,前端需要处理的只是对后台返回的接口来对前端进行数据处理和特效展示。
主要代码:
data部分:
return {imgUrl: app.appImg,url: app.url,indicator: false,autoplay: true,interval: 2000,duration: 500,dianimage: 0,bgtimer: null,domearr: [{title:'现金大奖',id:1,img:'#'},{title:'积分大奖',id:2,img:'#'},{title:'优惠券大奖',id:3,img:'#'},{title:'赠品手机',id:4,img:'#'},{title:'谢谢惠顾',id:0,img:'#'},{title:'谢谢惠顾',id:0,img:'#'},{title:'谢谢惠顾',id:0,img:'#'},{title:'谢谢惠顾',id:0,img:'#'}],swiperarr: [{title:'恭喜 樱桃小丸子 抽到88元现金红包'},{title:'恭喜 用户aaa 抽到77元现金红包'}],mainname: 'kai',endname: 't',frequency:5,mainbind :false}
抽奖代码方法部分:
btnFun(){var that = this;if(that.mainbind == false){if(that.frequency == 0){uni.showToast({title: '你已无抽奖次数',icon:"none",duration: 2000});}else{that.mainbind = true;that.mainname = 'kai';that.endname = 't';var index = parseInt(Math.random() * 8);that.mainname = 'kai'+(index+1);setTimeout(()=>{that.endname = 't'+(index+1);that.frequency = that.frequency - 1;if(that.domearr[index].id == 0){uni.showModal({title: '没有中奖,请再接再厉!',content: '谢谢惠顾',success: function (res) {that.mainbind = false;if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}});}else{uni.showModal({title: '恭喜你中奖了!',content: that.domearr[index].title,success: function (res) {that.mainbind = false;if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}});}},3900);}}else{uni.showToast({title: '请不要多次点击',icon:"none",duration: 2000});}}
如果想要全部代码,欢迎和我联系获取demo源码,希望这个思路对你有所帮助,一起进步。
uni-app开发经验分享二十二: uni-app大转盘思路解析相关推荐
- Android项目实战(二十二):启动另一个APP or 重启本APP
Android项目实战(二十二):启动另一个APP or 重启本APP 原文:Android项目实战(二十二):启动另一个APP or 重启本APP 一.启动另一个APP 目前公司项目需求,一个主AP ...
- 一位中科院自动化所博士毕业论文的致谢:二十二载风雨求学路,他把自己活成了光.........
4月18日,中国科学院官方微博发布消息,披露了这篇论文为<人机交互式机器翻译方法研究与实现>,作者是2017年毕业于中国科学院大学的工学博士黄国平. 这篇论文中情感真挚的<致谢> ...
- 实验二十二 SCVMM中的SQL Server配置文件
实验二十二 SCVMM中的SQL Server配置文件 在VMM 2012中管理员可以使用 SQL Server 配置文件,在部署完成虚拟机之后,实现 SQL Server 数据库服务自动化部署并交付 ...
- OpenCV学习笔记(二十一)——绘图函数core OpenCV学习笔记(二十二)——粒子滤波跟踪方法 OpenCV学习笔记(二十三)——OpenCV的GUI之凤凰涅槃Qt OpenCV学习笔记(二十
OpenCV学习笔记(二十一)--绘图函数core 在图像中,我们经常想要在图像中做一些标识记号,这就需要绘图函数.OpenCV虽然没有太优秀的GUI,但在绘图方面还是做得很完整的.这里就介绍一下相关 ...
- 读书二十二载,信念很简单,把书念下去,然后走出去,不枉活一世。
关注+星标公众号,不错过精彩内容 昨天看了一篇关于博士论文的致谢,看的我想哭.改变命运有很多条路,但是对于大多数人而言,读书是改变命运的捷径. 内容是讲述了自己20多年的求学经历:小时候煤油灯 ...
- Android开发笔记(一百二十二)循环器视图RecyclerView
RecyclerView RecyclerView是Android在support-v7库中新推出控件,中文别名为循环器视图,它的功能非常强大,可分别实现ListView.GridView,以及瀑布流 ...
- 自然语言处理系列二十二》词性标注》词性标注原理》词性介绍
注:此文章内容均节选自充电了么创始人,CEO兼CTO陈敬雷老师的新书<分布式机器学习实战>(人工智能科学与技术丛书)[陈敬雷编著][清华大学出版社] 文章目录 自然语言处理系列二十二 词性 ...
- (二十二)访问者模式详解(伪动态双分派) - 转
作者:zuoxiaolong8810(左潇龙),转载请注明出处. 本次LZ和各位分享一下访问者模式,从场景.设计初衷以及实现方面来说,访问者模式算是LZ即将写到的24种设计模式当中,最复杂也是最难理解 ...
- splice php,浅谈PHP源码二十二:关于array_splice函数
这篇文章主要介绍了关于 浅谈PHP源码二十二:关于array_splice函数,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 浅谈PHP源码二十二:关于array_splice函数 a ...
最新文章
- 专访小邪:从十年技术之路看阿里技术体系的变革
- ajax往CJJTable传值,jQuery+ajax怎么样实现动态数据分页
- php输出tab,设置Tab按钮列表 · DolphinPHP1.5.0完全开发手册-基于ThinkPHP5.1.41LTS的快速开发框架 · 看云...
- 大数据WEB阶段(二十)更新丢失
- yaml 数组_接口测试:A01_HttpRunner基础_05_YAML格式测试用例
- java取消按钮_Java Swing-单击取消按钮时不循环
- Chapter 4 : 单行函数
- 考研数学(180°为什么等于π)
- X86和X86_64和AMD64的由来
- 搭建了Pycharm对话平台
- DIV下的DIV居中
- 深圳恒波软件公司LockDir加密软件原理与破解
- 第1天学习打卡(Javaweb 邮件发送:原理、发送简单文本邮件、发送带图片和附件邮件、网站注册发送邮件Servlet实现)
- 美国计算机专业gre314,托福89,GRE 314获南加大计算机录取
- Python不能做游戏?一小时做出一个游戏!
- 在Excel中使用条件格式——让excel根据列值调整行颜色
- Shadow Caster Culling
- [error]:无法打开要写入的文件 XXX。您可能没有写入权限。
- Windows下在命令行安装postgresql,并注册成window服务;产品内置postgre
- 小草小草快点长大。。
热门文章
- Java程序编写 • 【第9章 程序:用定义类实现,吃货联盟订餐系统,新增商家和评论功能】
- 给计算机老师的元旦祝福,2020给老师元旦祝福语
- js-高德地图规划路线
- JS 实现GOOGLE地图线路规划
- ncx_mempool 轻量级内存池
- 使用attrib命令修复隐藏的文件夹
- 使用tableau制作词云
- 查询客户时,提示“查询已超出200行,请限制查询“
- Python爬虫(5):豆瓣读书练手爬虫
- python两列时间间隔计算器_python时间差计算器时分秒_python 实现日期计算器