建站学院

当前位置:

微信小程序开发之大转盘仿天猫超市抽奖效果代码分享

浏览量:1352次

本篇文章主要介绍了微信小程序开发之大转盘仿天猫超市抽奖效果代码分享,这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个.

上GIF看效果:

微信小程序开发之大转盘仿天猫超市抽奖效果代码分享

简要的说一下.

1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴;

2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些.

注释写了一些,凑合这看吧.有不对的地方,

欢迎批评!

上代码:
1.index.wxml


<view>
 <view></view>
 <view>
  <view>
   <image></image>
  </view>
  <view>START</view>
 </view></view>

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【915688610@qq.com】,我们在确认后,会立即删除,保证您的版权。