如何用小程序实现变速转台（如何用小程序实现变速转台）

如何用小程序实现变速转盘？下面这篇文章介绍了利用小程序实现一个变速转盘的方法，希望对大家有所帮助！

用小程序实现一个大转盘！大转盘并不陌生。开始抽奖，然后停在您获得奖品的位置。

实现方法:setInterval

我们先来实现均匀转盘。

首先，设计转盘，比如一个3×3的转盘，中间有一个启动按钮；我在这里设置的是背景颜色的变化。当彩票到达某个位置时，该位置的颜色会发生变化；先贴上我的ttml页面（不要在意我奇怪的配色~）//index . ttml { { item } }用css贴上来，直接复制就可以看到效果//index . ttss . box { margin:0 auto；宽度:600rpx显示器:flexflex -wrap:wrap；边框:1px纯黑；}.item { width:200 rpx；高度:200rpxline -高度:200rpxtext-align:居中；}另起一行，只需在不同的位置粘贴js并先查看数据:Games是转盘上要显示的内容，转盘的格式可以根据自己的需要编写。这对我来说是最基本的东西。Active用于记录旋转的位置，start用于记录开始位置，然后查看全局定义的回合和计时器。Round用来设定轨迹，相当于铺路。里面的下标只是外圈。计时器就是计时器。最后看一下begin方法//index . js const round =；让计时器；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（（）=》{ start++；start = start》8？0:开始；this . setdata（{ start，active:round【start】}）num++；if（num》24 & & this . data . active = = random）{//clear interval（timer）} }，70）；}}）比较简单，然后实现变速，其实速度的变化就是一转的时间的变化。

//index . jsconst round =【0，1，2，5，8，7，6，3，0】；让计时器；//Timer let num = 0；//用来记录总圈数，方便判断圈数let start = 0；//录音开始的位置下标let random = & # 39'；//记录停止的随机数（下标）let time = 70//记录计时器let count = 0的时间；//记录圈数，用于判断变速页面（{ data:{ games:【& # 39；$1', '$2', '$3', '$4', '开始& # 39；, '$5', '$6', '$7', '$8'】，active: 0，}，onLoad:function（options）{ }，begin lottery（）{ this . begin 1（）；}，begin 1（）{ if（num！= 0）{//防止用户重复单击return } timer = setinterval（this。流程、时间）；}，//旋转过程（）{ start = start+1；if（start》= 8）{ start = 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）；//四轮之后，如果（数学。floor（num/8）= = 4）。get random（）；} } if（this . data . active = = = random）{ clear interval（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来实现。

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

【相关学习推荐:小程序开发教程】

以上是如何使用小程序实现变速转盘的细节。更多资讯请关注主机参考其他相关文章！

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

• 手把手教你如何在小程序中实现浮动按钮（代码示例）（小程序浮动按钮）
• 小程序如何配置Twoxml完美支持Markdown！（小程序配置教程）
• 下面来说说小程序中页面传递参数的几种方式（微信小程序页面传递值）。
• 如何在小程序中实现下拉刷新和上拉加载功能？（附代码）（小程序的上拉加载触发器）
• 如何在小程序中创建页面二维码

本文由主机参考刊发，转载请注明：如何用小程序实现变速转台（如何用小程序实现变速转台） https://zhujicankao.com/105508.html