浅谈怎么使用小程序实现一个变速大转盘（浅谈怎么使用小程序实现一个变速大转盘的效果）

浅谈怎么使用小程序实现一个变速大转盘（浅谈怎么使用小程序实现一个变速大转盘的效果）

怎么使用小程序实现一个变速大转盘？下面本篇文章给大家介绍一下使用小程序实现一个变速大转盘的方法，希望对大家有所帮助！

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

使用小程序来实现一个大转盘吧！大转盘都不陌生，开始抽奖，然后停止的位置就是获得的奖品。

实现方法：setInterval

先来实现一下匀速大转盘吧

先将转盘设计好，比如3 x 3 的大转盘，中间是个开始按钮;我这里设置的是背景颜色的变化，当抽奖到达某个位置时，这个位置的颜色发生变化；先贴一下我的ttml页面吧（不要在意我奇怪的配色~）// index.ttml {{item}} 顺便css也贴一下吧，看效果直接复制就好了嘛// index.ttss.box{ margin: 0 auto; width: 600rpx; display: flex; flex-wrap: wrap; border: 1px solid black;}.item{ width: 200rpx; height: 200rpx; line-height: 200rpx; text-align: center;}-

另起一行，只是换个位置贴js

先看data：games是转盘上要显示的内容，转盘的格式可以根据自己的需求自己来写，我这个就是最基本的。active用来记录旋转到了什么位置,start用来记录开始的位置再来看全局定义的round和timer。round用来设置一个轨迹，相当于铺路啦，里面是要走的下标，刚好是外围一圈。timer是定时器最后看begin方法吧

// index.jsconst round = [0,1,2,5,8,7,6,3,0];let timer ;Page({ data: { games:['$1','$2','$3','$4','开始','$5','$6','$7','$8'], active: 0, start: 0, }, onLoad: function (options) { }, beginLottery(){ this.begin(); }, // begin begin(){ let start = this.data.start; let random = Math.floor(Math.random()*9); let num = 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，在第五圈停止

示例代码是根据旋转的圈数来进行变速，也可以根据旋转一定的时间来实现变速，这样就需要使用setTimeout来实现。

好啦，这次记录就到这里啦，有更好的解决方案，性能优化 欢迎评论！

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。