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

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

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

实现方法: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来实现。

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

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

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

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