大转盘是比较常见的抽奖活动 。以前做过h5的大转盘,最近小程序比较火,客户要求做小程序的大转盘。我们就来分析下代码。先上几个图:

   

界面效果还是很不错的。

做界面还是比较容易的,只要有前端基础没啥难度。

关键是 抽奖的动画,我们就是要小程序本身的动画:

界面加载的时候定义一个动画对象:

onLoad(opt) {
    this.setPlateData(); //执行设置转盘表面的文字
    let that = this;
    let aniData = wx.createAnimation({ //创建动画对象
      duration: 2000,
      timingFunction: 'ease'
    });
    this.aniData = aniData; //将动画对象赋值给this的aniData属性
  },

wx.createAnimation(OBJECT) 方法要是不懂,可以查看官方的文档:

https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html

接下来,点击“开始抽奖”,执行动画:

html代码: <view class="plate-btn-wrap" bindtap="startRollTap">
        <image src='/images/start@3x.png' class='start-img'></image>
      </view>
js代码:startRollTap() { //开始转盘
    let that = this;
    if (canRoll) {
      canRoll = false;
      let aniData = this.aniData; //获取this对象上的动画对象
      let rightNum = ~~(Math.random() * lotteryArrLen); //生成随机数
      console.log(`随机数是${rightNum}`);
      console.log(`奖品是:${lottery[rightNum]}`);
      aniData.rotate(3600 * num - 360 / lotteryArrLen * rightNum).step(); //设置转动的圈数
      this.setData({
        aniData: aniData.export()
      })

      setTimeout(function () {

        that.setData({
          ShowZheZhao: true,
          zjname: lottery[rightNum],
          zjnamepic: that.data.lottery_img[rightNum],
        });

      }, 2500);

      num++;
      canRoll = true;
    }
  },

若想获得详细地址:请点击下面的链接:

https://www.huzhan.com/code/goods281833.html

微信小程序-开心大转盘(圆盘指针)代码分析的更多相关文章

  1. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

  2. 微信小程序,前端大梦想(一)

    小程序框架MINA简介       微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用 ...

  3. 微信小程序,前端大梦想(二)

    微信小程序的视图与渲染  今天我们从四个方面来了解小程序:   •组件的基本使用  •数据绑定  •渲染标签  •模板的使用     一.组件的基本使用:  微信小程序为我们的开发提供了丰富的UI组件 ...

  4. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  5. 微信小程序+php 授权登陆,完整代码

    先上图        实现流程: 1.授权登陆按钮和正文信息放到了同一个页面,未授权的时候显示登陆按钮,已授权的时候隐藏登陆按钮,显示正文信息,当然也可以授权和正文分开成两个页面,在授权页面的onlo ...

  6. 微信小程序开发入门教程(二)---分析官方云开发例子中的一些功能

    接上一篇文章:https://www.cnblogs.com/pu369/p/11326538.html 1.官方云开发的例子中,点击获取 openid,对应代码在E:\wxDEV\helloyun\ ...

  7. 微信小程序之上传图片(含前后端代码例子)

    此代码示例,能够让你成功将图片上传至后端,后端做相应的处理,然后返回成功码. 前端小程序代码 index.wxml: <view class='content'> <view cla ...

  8. 用微信小程序开发的Canvas绘制可配置的转盘抽奖

    使用https://github.com/givebest/GB-canvas-turntable代码移植过而来. 其它 微信小程序感觉是个半成品,代码移植过程比较繁琐麻烦.canvas API 部分 ...

  9. 微信小程序源码推荐

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

随机推荐

  1. 011_URL和Ajax辅助器方法

    创建基本的链接和URL 在我们介绍链接或URL之前先做一些准备,我们这部分要介绍的知识将要使用的项目就是之前建立的HelperMethods项目,现在需要先为其添加一个People控制器,并在其中定义 ...

  2. 7. Reverse Integer java

    Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 代码如下: pub ...

  3. java 解析XML文档

    Java 解析XML文档 一.解析XML文档方式: 1.DOM方式:将整个XML文档读取到内存中,按照XML文件的树状结构图进行解析. 2.SAX方式:基于事件的解析,只需要加载XML中的部分数据,优 ...

  4. NSRange、NSPoint(CGPoint)、NSSize(CGSize)、NSRect(CGRect)

    1.NSRange: typedef struct _NSRange { NSUInteger location; NSUInteger length; } NSRange; NSRange本身是系统 ...

  5. 【C语言】01-第一个c程序代码分析

    创建了一个C程序,接下来分析一下里面的代码. 项目结构如下: 一.代码分析 打开项目中的main.c文件(C程序的源文件拓展名为.c),可以发现它是第一个C程序中的唯一一个源文件,代码如下: 1 #i ...

  6. Scala中的Extractor

    Scala中使用unapply方法可以实现三种extractor(另外使用unapplySeq也可以实现extractor) def unapply(object: S): Option[(T1, . ...

  7. swift_将UIDatePicker到达的传播之间的时间差在数小时出现页面的事

    今天,写swift demo当它来到了一个非常精彩的问题,我再次 present 使用页面出来 UIDatePicker 选择时间,然后再回到原来的主界面的时间,结果出现的问题:B页面的正常时间,传回 ...

  8. hibernate配置jndi

    tomcat里的conf->context.xml <Resource name="mysql"     auth="Container" type ...

  9. 扫雷游戏制作过程(C#描述):第三节、雷区绘制

    前言 这里给出教程原文地址. 该项目已经放在github上托管. 绘制雷区 这一节我们主要涉及界面中雷区的绘制.绘制雷区需要三个变量来保存雷区行数.列数.以及地雷的数量.而且我们希望能够自动获取上次游 ...

  10. PHP命名空间与自动加载类详解

    本文实例讲述了PHP命名空间与自动加载类.分享给大家供大家参考,具体如下: 今天我要给大家介绍的是PHP的命名空间 和 自动加载类 我先简单的分开演示 在放在一起 大家请看:什么是自动加载类? 想必大 ...