微信小程序开发之大转盘仿天猫超市抽奖

最新推荐文章于 2024-08-15 09:33:26 发布

dzp_coder

最新推荐文章于 2024-08-15 09:33:26 发布

阅读量2.7w

点赞数 5

分类专栏：微信小程序微信小程序开发文章标签：微信小程序大转盘抽奖仿天猫超市抽奖

本文链接：https://blog.csdn.net/qq_31383345/article/details/53504191

版权

这篇博客介绍了如何在微信小程序中开发一个仿天猫超市的大转盘抽奖功能。作者分享了开发过程，并提供了GIF效果展示。文章还提到了作者在CSDN上的微信小程序开发专栏，列出了相关技术文章链接，包括微信小程序的录音机、视频播放器等功能的实现，并提供了代码下载。

摘要由CSDN通过智能技术生成

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

简要的说一下.

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

CSDN微信小程序开发专栏,欢迎关注!
技术相关:
1.微信小程序之仿微信漂流瓶
 2.微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义
 3.微信小程序开发之录音机音频播放动画 (真机可用)
4.微信小程序开发之麦克风动画帧动画放大淡出

注释写了一些,凑合这看吧.有不对的地方,
欢迎批评!
上代码:
1.index.wxml

<view class="container-out">
  <view class="circle" wx:for="{
   {
   circleList}}" style="top:{
   {
   item.topCircle}}rpx;left:{
   {
   item.leftCircle}}rpx;background-color: {
   {(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view>
  <view class="container-in">
    <view class="content-out" wx:for="{
   {
   awardList}}" style="top:{
   {
   item.topAward}}rpx;left:{
   {
   item.leftAward}}rpx;background-color: {
   {(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">
      <image class="award-image" src="{
   {
   item.imageAward}}"></image>
    </view>
    <view class=