您当前的位置: 首页 > 解决方案

微信小程序大转盘抽奖

  • 作者: admin
  • 发布于 2018-06-02 13:54:16
  • 来源:  
  • 栏目:解决方案

导语: 微信小程序大转盘抽奖 说明 看到过太多骗点击

 

微信小程序大转盘抽奖


  • 说明

    看到过太多骗点击量的大转盘抽奖,也写一个玩玩

  • 需求 一个转盘界面 闪动的小点 奖品背景颜色的顺序改变 以及最终的结果提示

 

12.jpg

 


  • 分析完界面后就开始动手写了
    界面就是外面一个最大的view包住 闪动的小点一个view 8个奖品和一个START按钮

 

13.jpg

 


*闪动的红黄色小点

 

14.jpg

我们计算好每个点的位置 用for循环设置坐标值

 

 

15.jpg

定义红黄两色小球用setInterval更改颜色和实现闪动效果

 


  • 计算好奖品图片的位置 同理循坏定义

 

16.jpg

 

  • 绑定奖品背景颜色通过当前数组下标来实现选中的效果 用setInterval来进行旋转的效果,停下来的位置我们用一个随机数来控制

 

17.jpg

 


  • 注意
    旋转中途点击我们应将START变为WAIT并且在事件中增加判断其状态 使其点击无效

 

18.jpg

 

 



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部