当前位置：首页 > 科技观察

HarmonyOS-ArkUI实现宫廷彩票抽屉

时间：2023-03-16 10:26:44 科技观察

更多内容请访问：与华为共建的和谐科技社区正式上线https://ost.51cto.com前言相信大家都玩过格子彩票画。现在基于HarmonyOS-ArkUI，九宫格抽奖机让中奖不再是梦！接下来，我将与大家分享如何实现一个优雅的抽奖功能。效果展示功能分析按右边箭头方向旋转。旋转到一定的格子可以进行一定的操作。比如到达当前格子进行高亮显示等功能。旋转速度为停止->加速->恒速->减速->停止。解决方案：基于setInterval的旋转方法，不断改变setInterval的时间来控制旋转的快慢，通过定义变量个数来控制和清除setInterval定时器，然后添加一个定时器来显示一个转向速度的快慢。充值接口通过路由参数绑定抽奖接口的变量，将充值次数传递给主接口，达到减少抽奖次数的效果。画九宫格轮盘{{$t('strings.hello')}}{{title}}鸿蒙紫气*1

现金百万*1

.........

神秘奖品

查看奖品充值{{$item.name}}抽奖部分逻辑解释//点击开始抽奖handlerBut(){//第一次结束，开始下一轮抽奖this.timer=newDate()if(this.timer-this.time<8000)return//小于8000毫秒返回函数this.time=this.timerif(this.data1==0){//剩余次数为0，提示你充值次数this.showToast('剩余次数不够，请充值')}else{this.data1--//输入抽奖次数减少次数this.stopTimer=setInterval(this.handlerRevolving,300)//每300毫秒执行一次函数}},//点击查看奖品展示区handlerExamine(){if(this.showOpacity){this.opacityNum=.7this.showOpacity=false}else{this.opacityNum=0this.showOpacity=true}},//点击开始抽奖定时器执行函数handlerRevolving(){//每次执行i++对应滚动元素this.i++if(this.i===8){//循环this.i=0}//滚动奖品的速度由count控制this.count++//count等于5或45清除定时器并修改定时器时间重新执行定时器if(this.count===5||this.count===45){clearInterval(this.stopTimer);this.stopTimer=setInterval(this.handlerRevolving,200);}//count等于10或35清除定时器修改定时器时间，然后执行定时器if(this.count===10||this.count===35){clearInterval(this.stopTimer);这个.stopTimer=setInterval(this.handlerRevolving,100);}//count等于15，清除定时器修改定时器时间，然后执行定时器if(this.count===15){clearInterval(this.stopTimer);this.stopTimer=setInterval(this.handlerRevolving,50);}//当等于上述随机数时，停止定时器if(this.count===this.randomn){clearInterval(this.stopTimer);//重置count的值this.count=0//重新获取随机数this.randomn=Math.floor(Math.random()*8+50);//从下往上查看抽奖奖品的提示this.dataList.forEach((item,index)=>{item.top+=30})//查看奖品时添加到查看奖品的显示区switch(this.i){case0:this.showToast('鸿蒙子棋*1')this.dataList.push({name:'鸿蒙子棋*1',top:this.top})break;.........case7:this.showToast('谢参与')this.dataList.push({name:'谢参与',top:this.top})break;}}},}css样式.container{position:relative;弹性方向：列；证明内容：flex-start；对齐项目：居中；宽度：100%；高度：100%；背景图片：url(common/images/backcolor.png)；背景大小：150%；背景重复：不重复；填充：016px；background-position:50%0;}.title{text-align:center;宽度：100%；高度：100px；字体大小：40px；颜色：#000000；不透明度：0.9；border-bottom:1pxsolid#ccc;font-family:HYQiHei-65S;}.colorTow{background-color:blue;}.colorThree{background-color:yellow;}.block{width:25%;高度：25%；边框：1px纯黑色；文本对齐：居中；字体大小：16px；保证金：4%；显示：弹性；对齐项目：居中；证明内容：居中；边界半径：10px；背景色：粉色；}.whiteBlock{宽度：25%；高度：25%；边框：1px纯黑色；文本对齐：居中；字体大小：16px；保证金：4%；显示：弹性；对齐项目：居中；证明内容：居中；边界半径：10px；背景色：白色；}.block5{背景色：#409EFF；cursor:pointer;}.block6{flex-direction:column;证明内容：居中；align-items:center;}.frequency{font-size:15px}.prize{font-size:25px;margin-top:10px;}充值界面绘制制作充值界面

购买次数

一次售价：50.00元50.........

二十次售价：1000.00元1000

自定义

times

Buy点击充值元素将充值金额赋给degreeNumdatahandlerBut(){letthat=thisif(that.degree==0){that.degreeNumdata=1.........that.degreeNumdata=15}if(that.degree==4){that.degreeNumdata=20}//点击购买弹框确认购买自动返回主界面prompt.showDialog({title:'OKtobuy',message:`购买次数${that.degreeNumdata}次`,buttons:[{text:'OK',color:'#666666',},],//click确保跳转到主界面成功:function(data){console.log('------------------------'+data.index)that.degreeNum=that.dataNum+that.degreeNumdatathat.handlerBack()},});},}点击一个元素改变背景颜色和字体颜色get(id){this.degree=idif(id==0){//改变背景颜色和字体颜色this.backColorTow=this.backColorThree=this.backColorFour=this.backColorFive=this.whiteColorTow=this.whiteColorThree=this.whiteColorFour=this.whiteColorFive=''this.whiteColor='red'这个。backColor='#0a0'}.........if(id==5){//改变背景颜色和字体颜色this.backColorThree=this.backColor=this.backColorFour=this.backColorFive=this.backColorTow=this.whiteColor=this.whiteColorTow=this.whiteColorThree=this.whiteColorFour=his.whiteColorFive=''}}，源码https://gitee.com/li-jinit/harmony-os.git总结了巧妙结合的机制的setInterval实现了九方抽奖功能，当你点击抽奖时，它是轮子每旋转一次的机制。全局变量“i”为掷骰对应的奖品，“count”为掷骰数。当卷数等于随机数时，停止转动。随机数越大，滚动的圈数越多。注意：调用鸿蒙API时，注意方法回调中的this指针。更多信息请访问：与华为官方共建的鸿蒙技术社区https://ost.51cto.com

上一篇：人工智能如何影响消费者行为？

下一篇：戴尔服务器存储提升互联网金融服务水平

HarmonyOS-ArkUI实现宫廷彩票抽屉相关文章

最新推荐

猜你喜欢