怎么使用小程序实现一个变速大转盘？下面本篇文章给大家介绍一下使用小程序实现一个变速大转盘的方法，希望对大家有所帮助！
使用小程序来实现一个大转盘吧！大转盘都不陌生，开始抽奖，然后停止的位置就是获得的奖品。
实现方法：setInterval
先来实现一下匀速大转盘吧
先将转盘设计好，比如3 x 3 的大转盘，中间是个开始按钮;
我这里设置的是背景颜色的变化，当抽奖到达某个位置时，这个位置的颜色发生变化；
先贴一下我的ttml页面吧（不要在意我奇怪的配色~）
//index.ttml<viewclass="container"><viewclass="box"><viewclass="item"style="background-color:{{index==4?'red':(index==active?'rgb(229,250,250)':'rgb(236,216,135)')}};"tt:for="{{games}}"bindtap="{{index==4?'beginLottery':''}}">{{item}}</view></view></view>
顺便css也贴一下吧，看效果直接复制就好了嘛
//index.ttss.box{margin:0auto;width:600rpx;display:flex;flex-wrap:wrap;border:1pxsolidblack;}.item{width:200rpx;height:200rpx;line-height:200rpx;text-align:center;}
另起一行，只是换个位置贴js
先看data：games是转盘上要显示的内容，转盘的格式可以根据自己的需求自己来写，我这个就是最基本的。active用来记录旋转到了什么位置,start用来记录开始的位置
再来看全局定义的round和timer。round用来设置一个轨迹，相当于铺路啦，里面是要走的下标，刚好是外围一圈。timer是定时器
最后看begin方法吧
//index.jsconstround=[0,1,2,5,8,7,6,3,0];lettimer;Page({data:{games:['$1','$2','$3','$4','开始','$5','$6','$7','$8'],active:0,start:0,},onLoad:function(options){},beginLottery(){this.begin();},//beginbegin(){letstart=this.data.start;letrandom=Math.floor(Math.random()*9);letnum=0;timer=setInterval(()=>{start++;start=start>8?0:start;this.setData({start,active:round[start]})num++;if(num>24&&this.data.active==random){//clearInterval(timer)}},70);}})
比较简单，然后实现变速，其实速度的改变就是旋转一圈时间的改变
我这里的设计是：每旋转两圈实现一次变速，每次变速的时间在上一次时间上+100s，在第五圈停止
//index.jsconstround=[0,1,2,5,8,7,6,3,0];lettimer;//定时器letnum=0;//用来记录一共转了几次，方便判断转的圈数letstart=0;//记录开始的位置下标letrandom='';//记录停下来的随机数（下标）lettime=70;//记录定时器的时间letcount=0;//记录圈数，用来判断每2圈一次变速Page({data:{games:['$1','$2','$3','$4','开始','$5','$6','$7','$8'],active:0,},onLoad:function(options){},beginLottery(){this.begin1();},begin1(){if(num!=0){//防止用户重复点击return}timer=setInterval(this.process,time);},//旋转的过程process(){start=start+1;if(start>=8){start=0;//当start=8的时候，表示已经转过1圈了count+1count=count+1;}this.setData({active:round[start]})num=num+1;//实现两圈一次变速if(num%8===0&&count===2){count=0;clearInterval(timer);time=time+100;timer=setInterval(this.process,time);//转了4圈,即将在第五圈停止if(Math.floor(num/8)===4){this.getRandom();}}if(this.data.active===random){clearInterval(timer);num=0;random='';time=70;count=0;}},getRandom(){letn=Math.floor(Math.random()*9);if(n==4){this.getRandom();}else{random=nreturn;}}})
示例代码是根据旋转的圈数来进行变速，也可以根据旋转一定的时间来实现变速，这样就需要使用setTimeout来实现。
好啦，这次记录就到这里啦，有更好的解决方案，性能优化 欢迎评论！
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/39499.html；
