大转盘是比较常见的抽奖活动 。以前做过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. search in rotated sorted array leetcode

    原题链接 题意:给你一个目标值,或者返回其在数组中的下标位置,或者返回-1(表示不存在,查找失败). 例如 0 1 2 4 5 6 7 可能成为 4 5 6 7 0 1 2. 思路分析: 用二分搜索来 ...

  2. Hadoop、Pig、Hive、Storm、NOSQL 学习资源收集

    (一)hadoop 相关安装部署 1.hadoop在windows cygwin下的部署: http://lib.open-open.com/view/1333428291655 http://blo ...

  3. Css3渐变实例Demo(一)

    1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...

  4. Naive Bayes在mapreduce上的实现(转)

    Naive Bayes在mapreduce上的实现 原文地址 http://www.cnblogs.com/sunrye/p/4553732.html Naive Bayes是比较常用的分类器,因为思 ...

  5. HTML5+js页面传值给Java后台的小技巧

    页面传值小技巧 平常我们在做的web项目,一般一个HTML页面上会有好几个步骤,step_num①,step_num②,step_num③,一般先显示step_num①,根据跳转条件显示step_nu ...

  6. mysql之数据库的增删改查

    一.DDL 1.创建数据库 create database 数据库名 *数据库名不能中文, 不能数字正常英文 , 关键字会自动变大写 2.删除数据库 drop database 数据库名 3.使用数据 ...

  7. 关于Resin SSL支持的两个问题

    1.Resin的OpenSLL支持功能只有收费Pro版才支持,这一点,只有你做好配置,测试的时候才会在提示中发现,文档里没有说明. 2.它的官方文档这部分有问题,第一个问题就是上面第一条没有说,第二个 ...

  8. python字符串编码理解(转载)

    (转载)字符编码和python使用encode,decode转换utf-8, gbk, gb2312 (http://www.cnblogs.com/jxzheng/p/5186490.html) A ...

  9. iOS笔记之UIKit_UISlider/UIStepper/UISwitch

    - (void)viewDidLoad { [super viewDidLoad]; self.sp = [[UIStepper alloc]init]; //设置计步器的位置 self.sp.cen ...

  10. (matlab)plot画图的颜色线型(转)

    http://wenku.baidu.com/link?url=SVVMVH8QlDIu2hVKDtoBYs6l0CnQvFnFHJJ9yexmYVKQqhz47qIr7aK7LOf8nN0qNdy8 ...