android 九宫格转盘,vue组件实现移动端九宫格转盘抽奖
本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下
vue-lucky-draw
移动端九宫格转盘抽奖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,喜欢的话点个星吧_~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
时间: 2020-10-15
android 九宫格转盘,vue组件实现移动端九宫格转盘抽奖相关推荐
- vue组件库介绍以及组件库Element UI 的使用
组件库 前言 这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库 在实际开发中,前端 ...
- 移动端九宫格转盘抽奖vue组件
vue-lucky-draw 移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定. 效果图 抽奖 因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置 ...
- webAPP如何实现移动端拍照上传(Vue组件示例)?
摘要:使用HTML5编写移动Web应用,主要是为了尝试一下"一套代码多处运行",一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然 ...
- 移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹 整编 综合自:https://didi.github.io/cube-ui/ ...
- 使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...
- Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant 可以快速搭建出风格统一的页面,提升开发效率. Vant 一.关于 1.0 距离 Vant ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
2019独角兽企业重金招聘Python工程师标准>>> element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组 ...
- Android自定义九宫格手势解锁组件
项目来源 别的不说,先看一下效果图: 九宫格手势图案解锁功能在很多应用中都在使用,本文介绍的组件来自于开源项目PatternLocker的翻写,原工程是使用Kotlin开发的,由于我们项目是使用jav ...
- vant官网-vant ui 首页-移动端Vue组件库
Vant 是有赞前端团队开源的移动端vue组件库,适用于手机端h5页面. 鉴于百度搜索不到vant官方网址,分享一下vant组件库官网地址,方便新手使用 vant官网地址https://vant-co ...
最新文章
- 360oauth token是什么意思_我在BOSS直聘上都和面试官聊了些什么?
- leetcode 75. 颜色分类(双指针)
- string和byte[]的相互转换
- Html.Action、html.ActionLink与Url.Action的区别
- pytorch报错RuntimeError: error in LoadLibraryA
- fn+ 设置虚拟按键_华为手机打字震动在哪设置?很简单,只需这样操作
- !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)
- java从入门到精通6
- 如何查看java源码
- CT一般扫描参数_工业CT检测服务
- 阿里云云计算专业认证(ACP)怎么样,怎么学习?
- Android SQLite Google 官方用法
- 查看mysql汉字占用的字节数_一个汉字在数据库占几个字节
- TeamViewer作为个人用途免费,但仅可使用在有限数量的设备上。您已经到达可使用设备的上线
- c语言混沌序列,基于混沌序列的数据加密算法
- autojs声明文件
- python 四维数据怎么看性别_四维b超数据怎么看性别
- 计算机ppt制作培训心得,PPT课件制作及微课录制心得
- 第六天 02.mysql数据库的基本操作和密码爆破
- 华为mate30如何开启USB网络共享
热门文章
- java输入字母_JAVA如何把输入中文输出汉语拼音字母的原理与代码
- 《UNIX网络编程》读书笔记——第三章 套接字编程简介
- python 处理url 参数_python模块 furl 使得操纵URL简单化,去除网址中参数
- React 可移动设置时间的课程表组件
- SEED-LABS Firewall Exploration Lab
- 高分辨空间代谢组学的应用领域介绍
- 【开源工具】使用Whisper提取视频、语音的字幕
- 好评较高的图片转文字软件免费的有哪些?看看这篇文章就知道了
- Python爬虫开源项目代码(爬取微信、淘宝、豆瓣、知乎、新浪微博、QQ、去哪网 等等)
- 大厂笔试都考什么题?超详细的笔试试题【附带解析】数据分析