小程序中实现类似天猫抽奖的大转盘和跑马灯的效果

发布日期： 2017-02-28 阅读量： 作者： 网络

在我们做电商的主题活动的时候，经常用到跑马灯来吸引眼球，并用大转盘来实现抽奖的效果。
如何在微信小程序开发中也能实现这样的效果呢？具体请看下面的讲解。

需要实现的功能
1.实现类似天猫超市抽奖的大转盘
2.再实现跑马灯效果
3.点击start，开始抽奖，抽奖完成后有弹窗

先看效果图

简单说一下

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

下面是页面的WXML代码：

<!--index.wxml--> 
<view>  
  <view></view>  
  <view>  
    <view>  
      <image></image>  
    </view>  
    <view>START</view>  
  </view>  
</view>

# 小程序开发

上一篇: win10电脑显示已禁用IME怎么办

下一篇: 织梦怎么去掉列表推荐文档的粗体字效果

小程序中实现类似天猫抽奖的大转盘和跑马灯的效果

随便看看