vue组件实现移动端九宫格转盘抽奖


Posted in Javascript onOctober 16, 2020

本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下

vue-lucky-draw

移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定。

效果图

vue组件实现移动端九宫格转盘抽奖

抽奖

因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置,也就是要模拟出这个中奖的过程(所以所谓的抽奖都是骗人的,嘿嘿)。先要写出移动的背景框对应的各个位置的css,然后动态切换class来使其呈现出转动效果。明白了过程就好写了。

中间的按钮用的是css3的animation,我这个奖品是合在了一张图上,你也可以分开成8张小图,那样需要写更多的样式。

// 抽奖
 handleStart() {
 if (this.isRuningLucky) {
  return Toast("正在抽奖中...");
 }
 if (isNaN(Number(this.initSpeed))) {
  return false;
 }
 this.speed = this.initSpeed;
 // 开始抽奖
 this.isRuningLucky = true;
 this.time = Date.now();
 this.drawAward();
 Toast("开始抽奖");
 },
 drawAward() {
 // 请求接口,模拟一个抽奖数据(假设请求时间为2s)
 setTimeout(() => {
  this.award = {
  id: "4"
  };
  console.log("返回的抽奖结果是", this.award);
 }, 2000);
 this.move();
 },
 move() {
 let timer = setTimeout(() => {
  this.current++;
  if (this.current > 7) {
  this.current = 0;
  }
  // 若抽中的奖品id存在,则开始减速转动
  if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
  console.log("奖品出来了");
  this.speed += this.diff; // 转动减速
  
  // 若转动时间超过4秒,并且奖品id等于小格子的奖品id,则停下来
  if (
   (Date.now() - this.time) / 1000 > 4 &&
   this.award.id == this.awards[this.current].id
  ) {
   clearTimeout(timer);

   setTimeout(() => {
   this.isRuningLucky = false;
   // 这里写停下来要执行的操作(弹出奖品框)
   Toast(
    "您抽中的奖品是" + this.awards[this.current].name + ",奖品id是" + this.awards[this.current].id
   );
   }, 400);
   return;
  }

  // 若抽中的奖品不存在,则加速转动
  } else {
  if (this.speed >= 50) {
   this.speed -= this.diff; // 转动加速
  }
  }

  this.move();
 }, this.speed);
 },

号码滚动

使用无序列表将号码列表(正常是从接口获取)循环出来,通过设置定时以及控制transition的属性,来达到无缝连接的效果。如果样式(li高度)改变的话,需要对定时器时间进行调节(控制下一个显示的时间)。

// 中奖名单滚动
 scroll() {
 this.animate = true;
 let timer = setTimeout(() => {
  this.list.push(this.list[0]);
  this.list.shift();
  this.animate = false;
 }, 500);
 }

功能代码请移步到我的GitHub
可以clone项目 npm i , npm run dev,喜欢的话点个星吧_~

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

Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
axios取消请求的实践记录分享
Sep 26 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
Vue3.0的优化总结
Oct 16 #Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 #Javascript
利用js实现简易红绿灯
Oct 15 #Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 #Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 #Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 #Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 #Javascript
You might like
最常用的8款PHP调试工具
2014/07/06 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
基于vue实现分页效果
2017/11/06 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python 日志增量抓取实现方法
2018/04/28 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
大学班级文化建设方案
2014/05/06 职场文书
初中思想品德教学反思
2016/02/24 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python
Python 匹配文本并在其上一行追加文本
2022/05/11 Python