uni-app开发经验分享二十二: uni-app大转盘思路解析
1 2 3 | 最近在研究uni-app,制作了一个很有意思的集合项目demo,这里给大家分享下大转盘的前端设计思路 需求案例:大转盘抽奖 |
线上demo查看:
案例效果:
制作思路:
1 | 前端大转盘使用css3动画来做,在开始做的时候,我思路上碰到一个问题,抽奖结果是我前端给后台还是后台给我,最后我发现,只有后台传结果给前台才能实现代码的数据闭环,那么按照这个思路,前端需要处理的只是对后台返回的接口来对前端进行数据处理和特效展示。 |
主要代码:
data部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 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 } |
抽奖代码方法部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 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源码,希望这个思路对你有所帮助,一起进步。
__EOF__
分类:
uni-app学习笔记
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee