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


Posted in Javascript onDecember 08, 2016

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

上GIF看效果:

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

简要的说一下.

1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴;

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

注释写了一些,凑合这看吧.有不对的地方,

欢迎批评!

上代码:
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="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">START</view>
 </view>
</view>

2.index.wxss

.container-out {
 height: 600rpx;
 width: 650rpx;
 background-color: #b136b9;
 margin: 100rpx auto;
 border-radius: 40rpx;
 box-shadow: 0 10px 0 #871a8e;
 position: relative;
}

.container-in {
 width: 580rpx;
 height: 530rpx;
 background-color: #871a8e;
 border-radius: 40rpx;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}

/**小圆球
box-shadow: inset 3px 3px 3px #fff2af;*/

.circle {
 position: absolute;
 display: block;
 border-radius: 50%;
 height: 20rpx;
 width: 20rpx;
}

.content-out {
 position: absolute;
 height: 150rpx;
 width: 166.6666rpx;
 background-color: #f5f0fc;
 border-radius: 15rpx;
 box-shadow: 0 5px 0 #d87fde;
}

/**居中 加粗*/

.start-btn {
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 border-radius: 15rpx;
 height: 150rpx;
 width: 166.6666rpx;
 background-color: #ffe400;
 box-shadow: 0 5px 0 #e7930a;
 color: #f6251e;
 text-align: center;
 font-size: 55rpx;
 font-weight: bolder;
 line-height: 150rpx;
}

.award-image {
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 height: 140rpx;
 width: 130rpx;
}

3.index.js

Page({
 data: {
  circleList: [],//圆点数组
  awardList: [],//奖品数组
  colorCircleFirst: '#FFDF2F',//圆点颜色1
  colorCircleSecond: '#FE4D32',//圆点颜色2
  colorAwardDefault: '#F5F0FC',//奖品默认颜色
  colorAwardSelect: '#ffe400',//奖品选中颜色
  indexSelect: 0,//被选中的奖品index
  isRunning: false,//是否正在抽奖
  imageAward: [
   '../../images/1.jpg',
   '../../images/2.jpg',
   '../../images/3.jpg',
   '../../images/4.jpg',
   '../../images/5.jpg',
   '../../images/6.jpg',
   '../../images/7.jpg',
   '../../images/8.jpg',
  ],//奖品图片数组
 },

 onLoad: function () {
  var _this = this;
  //圆点设置
  var leftCircle = 7.5;
  var topCircle = 7.5;
  var circleList = [];
  for (var i = 0; i < 24; i++) {
   if (i == 0) {
    topCircle = 15;
    leftCircle = 15;
   } else if (i < 6) {
    topCircle = 7.5;
    leftCircle = leftCircle + 102.5;
   } else if (i == 6) {
    topCircle = 15
    leftCircle = 620;
   } else if (i < 12) {
    topCircle = topCircle + 94;
    leftCircle = 620;
   } else if (i == 12) {
    topCircle = 565;
    leftCircle = 620;
   } else if (i < 18) {
    topCircle = 570;
    leftCircle = leftCircle - 102.5;
   } else if (i == 18) {
    topCircle = 565;
    leftCircle = 15;
   } else if (i < 24) {
    topCircle = topCircle - 94;
    leftCircle = 7.5;
   } else {
    return
   }
   circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
  }
  this.setData({
   circleList: circleList
  })
  //圆点闪烁
  setInterval(function () {
   if (_this.data.colorCircleFirst == '#FFDF2F') {
    _this.setData({
     colorCircleFirst: '#FE4D32',
     colorCircleSecond: '#FFDF2F',
    })
   } else {
    _this.setData({
     colorCircleFirst: '#FFDF2F',
     colorCircleSecond: '#FE4D32',
    })
   }
  }, 500)
  //奖品item设置
  var awardList = [];
  //间距,怎么顺眼怎么设置吧.
  var topAward = 25;
  var leftAward = 25;
  for (var j = 0; j < 8; j++) {
   if (j == 0) {
    topAward = 25;
    leftAward = 25;
   } else if (j < 3) {
    topAward = topAward;
    //166.6666是宽.15是间距.下同
    leftAward = leftAward + 166.6666 + 15;
   } else if (j < 5) {
    leftAward = leftAward;
    //150是高,15是间距,下同
    topAward = topAward + 150 + 15;
   } else if (j < 7) {
    leftAward = leftAward - 166.6666 - 15;
    topAward = topAward;
   } else if (j < 8) {
    leftAward = leftAward;
    topAward = topAward - 150 - 15;
   }
   var imageAward = this.data.imageAward[j];
   awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });
  }
  this.setData({
   awardList: awardList
  })
 },
 //开始游戏
 startGame: function () {
  if (this.data.isRunning) return
  this.setData({
   isRunning: true
  })
  var _this = this;
  var indexSelect = 0
  var i = 0;
  var timer = setInterval(function () {
   indexSelect++;
   //这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
   i += 30;
   if (i > 1000) {
    //去除循环
    clearInterval(timer)
    //获奖提示

    wx.showModal({
     title: '恭喜您',
     content: '获得了第' + (_this.data.indexSelect + 1) + "个优惠券",
     showCancel: false,//去掉取消按钮
     success: function (res) {
      if (res.confirm) {
       _this.setData({
        isRunning: false
       })
      }
     }
    })
   }
   indexSelect = indexSelect % 8;
   _this.setData({
    indexSelect: indexSelect
   })
  }, (200 + i))
 }
})

demo代码下载

demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
JavaScript设置FieldSet展开与收缩
May 15 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
详解jQuery中的easyui
Sep 02 jQuery
vue移动端弹框组件的实例
Sep 25 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 #Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 #Javascript
浅谈JavaScript的闭包函数
Dec 08 #Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 #Javascript
Vue.JS入门教程之自定义指令
Dec 08 #Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 #Javascript
node.js学习之交互式解释器REPL详解
Dec 08 #Javascript
You might like
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
大学活动策划书范文
2014/01/10 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
我的理想演讲稿
2014/04/30 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
蓬莱阁导游词
2015/02/04 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
Vue全局事件总线你了解吗
2022/02/24 Vue.js