VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动

浅谈如何用小程序实现一个变速转盘(微信小程序转盘)

locvps
主机参考:VPS参考测评推荐,专注分享VPS主机优惠信息!若您是商家也可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
部分文章发布时间较久远,可能存在未知因素,购买时建议在本站搜索商家名称,可查看相关文章充分了解商家!若非中文页面可使用谷歌浏览器同步翻译!PayPal代付/收录合作

如何用小程序实现变速转盘?下面这篇文章介绍了用小程序实现一个变速转盘的方法,希望能帮到你!

浅谈如何用小程序实现一个变速转盘(微信小程序转盘)

用小程序实现大转盘!大转盘并不陌生。开始抽奖,然后停在拿奖的位置。

实现方法:setInterval

先来实现一下统一转盘。

先设计转盘,比如中间有启动按钮的3×3转盘;我在这里设置的是背景颜色的变化。当彩票到达某个位置时,这个位置的颜色发生变化;请先贴上我的ttml页面(不用担心我奇怪的配色~)//index . ttml < view class = ;容器 gt ltview class = 方框 gt ltview class = item style = background-color: {{ index == 4?'红色 # 39;:(index == active?'rgb(229,250,250) # 39;: 'rgb(236,216,135) # 39;)}};&;TT:for = ;{ { games } } bindtap = {{index == 4?'beginLottery # 39: ''} } gt{ { item } } lt/view gt; lt/view gt; lt/view gt;对了,贴css,看到效果后直接复制就好了。//index . ttss . box { margin:0 auto;宽度:600rpx显示器:flexflex -wrap:wrap;边框:1px纯黑;}.item { width:200 rpx;身高:200rpxline -高度:200rpxtext-align:居中;}另起一行,在另一个位置贴js先读取数据即可:Games是转盘上要显示的内容,转盘的格式可以根据自己的需要编写。我的最基础。Active用来记录旋转到哪里,start用来记录开始位置,然后看全局定义的回合和计时器。圆是用来定轨道的,相当于铺路。里面是要去的下标,就在外围。定时器就是定时器。最后看begin方法。//index . jsconst round =;let定时器;page({ data:{ games:[ # 39;$1','$2','$3','$4','开始 # 39;,'$5','$6','$7','$8'],active: 0,start: 0,},onLoad: function (options) { },begin lottery(){ this . begin();},//begin begin(){ let start = this . data . start;设random = math . floor(math . random()* 9);设num = 0;timer = setInterval(()= gt;{ start++;start = start gt8 ?0:开始;this.setData({ start,active:round[start]})num++;if(num gt;24 this . data . active = = random){//clear interval(timer)} },70);}})比较简单,然后实现变速。实际上,速度的变化就是一转时间的变化。

//index.jsconst round = [0,1,2,5,8,7,6,3,0];let定时器;//Timer let num = 0;//用来记录总圈数,方便判断圈数let start = 0;//记录开始的位置下标let random = # 39';//记录停止的随机数(下标)let time = 70//记录计时器let count = 0的时间;//记录圈数,用于判断每2圈变速的页面({ data:{ games:[ # 39;$1', '$2', '$3', '$4', '开始 # 39;, '$5', '$6', '$7', '$8'],active: 0,},onLoad: function (options) {},begin lottery(){ this . begin 1();},begin1() { if(num!= 0){ //防止用户重复点击return } timer = setinterval(this . process,time);},//旋转过程process(){ start = start+1;if(start gt;= 8) {开始= 0;//当start = 8时,表示已经转了一圈。计数+1计数=计数+1;} this . setdata({ active:round[start]))num = num+1;//实现两圈一次变速if(num % 8 = = = 0 ;count = = = 2){ count = 0;clearInterval(定时器);时间=时间+100;timer = setInterval(this.process,time);//转了4圈,第5圈我就要停if了(math . floor(num/8)= = 4){ this . get random();} } if(this . data . active = = = random){ clearInterval(timer);num = 0;random = # 39';时间= 70;count = 0;} },get random(){ let n = math . floor(math . random()* 9);if(n = = 4){ this . get random();} else { random = n return}}})示例代码是根据转数来改变速度,或者是根据一定时间的旋转来改变速度,所以需要使用setTimeout来实现。

好了,这个记录到此为止。有更好的解决方案和性能优化。欢迎评论!

【相关学习推荐:小程序开发教程】以上是如何使用小程序实现一个变速转盘的细节。更多请关注主机参考其他相关文章!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:浅谈如何用小程序实现一个变速转盘(微信小程序转盘) https://zhujicankao.com/75297.html

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 浅谈如何用小程序实现一个变速转盘(微信小程序转盘)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!