Vue实现3*3九宫格抽奖（并拓展实现n*n多宫格抽奖）
九宫格抽奖，包括幸运大转盘，已经在不管是电商还是日常网页中已经算是比较常见的页面效果了（此处点名批评pdd），那么如何用Vue来实现九宫格以及后续的十二宫格，十六宫格等多宫格抽奖组件呢？
先上效果图：
一、转圈抽奖实现思路
要实现九宫格抽奖，得先明确几个实现的要点：
- 得有个先加速到最快，点击停止后再逐渐减速的过程
- 允许内定选项存在（不管什么时候点击停止光块总会停止到指定选项）
- 有部分需求可能会规定转到第几圈开始加速
所以根据这些情况，我们可以拟定代码如下：
// 使转动停止的方法aroundStop() {// 清除定时器clearTimeout(this.timer);this.timer = null;return null;},aroundFunction(time,type) {if (time === 500) {// defaultId: 内定选项的Idif (this.defaultId && this.defaultId !== "") {if (this.defaultId === this.activeCell) return this.aroundStop();} else {return this.aroundStop();}}this.timer = setTimeout(() => {// type=true 的时候，表示开始转动，每次运行都会缩减延时器间隔，导致转动越来越快// type=false 的时候，表示停止转动，每次运行都会延长延时器间隔，导致转动越来越慢let ms = type ? time - 30 : time + 30;// activeOrder 是指示器指到的选项的下标// cellCount 是带选项的总个数，因为要对应下标所以-1if (this.activeOrder < this.cellCount - 1) {this.activeOrder = this.activeOrder + 1;} else {// 转到头就重置状态，circleNum 也就是圈数，此时圈数+1this.activeOrder = 0;this.circleNum = this.circleNum + 1;}// 转动效果最好的间隔的最小值if (ms < 50) {ms = 50;}// 转动间隔的最大值if (ms > 500) {ms = 500;}this.aroundFunction(ms, type);}, time);},其实也能看出来，实现很简单，就是根据点击的是开始还是结束来使用延时器进行光块的加速或者减速甚至停止。点击开始就将时间间隔从500每次减50，此时是转动加速阶段，一直减少到50ms，并保持不变，此时，转动进入稳定阶段。点击结束就将间隔从50开始，每次加50ms一直加到500ms，加到500ms后停止并清除定时器，此时转动进入减速阶段直至停止。
至于为什么是使用延时器而不是定时器，是因为延时器能够和递归结合起来进行更好的逻辑处理，而且不用像定时器那样每次转动动作开始前都要进行定时器的清理。
而且判定停止和加速的因素可以是很多，比如转到第三圈才开始加速，就将代码中的circleNum进行一个判断，判断其是不是大于等于三来作为是否减小延时器间隔的依据之一，内定的实现方式也是一样，当减速到恒定值的时候，每次转动判断此时转动到的奖品是不是内定值来确认是不是要停止转动。
然而如果想完整的实现该组件，难点并不在于怎样进行功能的实现，而是怎样对九宫格，还有九宫格个扩展的4X4十二宫格，5X5十六宫格UI层面的搭建。
二、实现九宫格及多宫格的UI布局
1.流行布局方式介绍
其实如果仅仅是九宫格，则实现起来比较简单，那就是将对应的每个方块使用绝对定位的方式进行拼凑，强行凑出九宫格的布局，像这样：
或者这样：
或者是这样：
上图来源于九宫格，大转盘抽奖开源组件lucky-canvas，官网地址：
九宫格抽奖 | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫格 & 老虎机】抽奖插件
Vue实现3*3九宫格抽奖（并拓展实现n*n多宫格抽奖）相关推荐
- java 9宫格抽奖_多宫格抽奖
网上大多的多宫格抽奖都是自定义view,如果view的布局不一样而且太多的话容易出现oom,不好管理 结合RecyclerView实现多宫格抽奖 效果图如下 满足所有矩形多宫格抽奖 9宫格 16宫格 ...
- java 9宫格抽奖_前端js实现九宫格模式抽奖（多宫格抽奖）
介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. 四宫格抽奖 ...
- JS 时间函数实现9宫格抽奖
JS 时间函数实现9宫格抽奖 思路:九宫格抽奖抽象出来,其实就是点击开始按钮以后,从首个单元开始,不停的绕着8个格子转动,最后停留在目标位置. 以下是html部分: <div class=&qu ...
- java 9宫格抽奖_js 实现9宫格抽奖（react）
最近工作中有个9宫格抽奖的需求,一开始没啥思绪,网上查阅一番,自己又修改了一下,希望与大家交流分享. 先看一下效果图 整理一下思路 利用flex布局形成9宫格,每个格子的序号为0~8,创建一个记录当前 ...
- 微信小程序多宫格抽奖
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...
- python语言编写一个生成九宫格图片的代码_python简单实现9宫格图片实例
在日常生活中我们经常在朋友圈看到有人发九宫格图片,其实质就是将一张图片切成九份,然后在微信中一起发这九张图. 那么我们如何自己动手实现呢? 说到切图Python 就可以实现,主要用到的 Python ...
- php9宫格抽奖程序_PHP实现抽奖功能实例代码
在项目开发中经常会遇到花钱抽奖类型的需求.但是老板总是担心用户用小钱抽到大奖.这样会导致项目亏损.下边这段代码可以有效制止抽奖项目亏钱. 个人奖池: 语言:thinkphp redis mysql 表 ...
- vue实现视频播放1，4，6，9，16宫格布局
先上图 创建播放器 HwCellPlayer.vue <template><div class="player">player{{ title }}< ...
- java 9宫格抽奖_九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
最新文章
- Pokémon Go数据收集是否带来隐私问题
- 解决 APP启动白屏黑屏问题
- pthread_join/pthread_exit用法实例
- 后疫情时代，银行从数字化转型到智能化“迁徙”
- g6-editor 使用
- S:date 的使用方法
- 方法级别的java日志输出控制（一）
- Android对话框集合
- c语言低通滤波参数调节,低通滤波器的参数设置
- 集成电路将成一级学科，这些高校迎来重大机遇！
- BAT公司 or 创业公司，选择哪个更好？
- solaris启动过程详解
- linux开启dhcpclient服务,dhcp client 配置
- python没有random模块_python-random模块
- 计算思维导论-为什么要学习计算思维
- 求解多元一次方程解的个数（参考内容）
- 南京工业大学python期末_南京工业大学燃爆期末复习总结
- 脆弱的GPS系统--摘抄《环球科学》
- 常用Office（Excel、PPT、Word）操作
- 全国计算机等级考试自行打印准考证打印黑白的还是彩色的~