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与vbscript数据共享
Jan 09 Javascript
Javascript中的常见排序算法
Mar 27 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
微信小程序实现录音功能
Nov 22 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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
我的论坛源代码(三)
2006/10/09 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php-fpm配置详解
2014/02/12 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Python笔试面试题小结
2019/09/07 Python
解析python实现Lasso回归
2019/09/11 Python
python实现超级玛丽游戏
2020/03/18 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
材料员岗位职责
2014/03/13 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL