vue抽奖组件之九宫格

dendoink 发布于2019-08-23 14:11 / 2505人阅读

摘要：写在前面本人自从事前端工作以来，每每遇到技术问题后，都是向百度谷歌求教，久而久之便养成了伸手即来的本领。。。可能是出于懒的原因没错，就是因为懒，从未发表过技术文章或开发经验，深感惭愧，故洗心革面，决心分享一些东西。

写在前面

本人自从事前端工作以来，每每遇到技术问题后，都是向百度/谷歌求教，久而久之便养成了伸手即来的‘本领’。。。可能是出于‘懒’的原因（没错，就是因为懒），从未发表过技术文章或开发经验，深感惭愧，故洗心革面，决心分享一些东西。  
本文所述仅冰山一角，欢迎大家留言宝贵经验~。

1.需求

页面属于活动页面  
a.进入页面会请求后台接口，拉取当前用户抽奖剩余次数  
b.点击九宫格开始按钮，开始转动，并请求后台接口
c.接口请求成功，根据接口返回的停留位置停止转动
d.可连续抽奖，直至抽奖次数为0
大致展示效果如下

2.组件源码

template部分

script部分

1.接口说明：如果本地localhost启动，可以用setTimeout模拟post请求
2.函数说明：

move函数 为100ms转动，切最小转动次数为12（一圈半，也就是防止接口返回太快，刚开始转就停止）,当接口返回成功后，记录当前index及服务器的返回停止位置stopIndex,并执行enter函数;
enter函数 100ms转动，接受参数，计算当前index与stopIndex的差值，如果>4，就可以执行递减，===4时；<=4，再次判断是否>-4（这个判断是为了计算多转几次），执行stop函数;
stop函数 为300ms转动，只转4次，然后完成整个流程;

3.对于setInterval，当组件销毁时，要清除定时器

style部分
关于正方形布局，通过{width:100%;padding-bottom:100%;}实现

@common/js/ajax源码如下

// https://github.com/axios/axios
const axios = require("axios");


// 超时 15秒
// axios.defaults.timeout = 15000;
// 允许发送cookie
axios.defaults.withCredentials = true;

/**
 * get请求
 * @param {string} url - 请求的路径
 * @param {Object} params - 参数
 * @return {Promise}
 */
export function get(url, params = {}) {
  return axios.get(url, {
    params,
  });
}
/**
 * post请求
 * @param {string} url - 请求的路径
 * @param {Object} data - 参数
 * @param {Object} config - 原始配置
 * @return {Promise}
 */
export function post(url, data = {}, config = {}) {
  return axios.post(url, data, config);
}

deepQuery源码如下

/**
 * 深度查询 deepQuery({},"a","b","c")
 * @param {any} func 要查询的对象
 * @return {boolean} true or false
 */
export function deepQuery(obj, ...args) {
  return args.reduce((a, b) => (a ? a[b] : a), obj);
}

3.写在后面

欢迎各位大佬指正
后续会分享自定义日历组件/城市地点选择组件等等，欢迎大家一起讨论学习！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100217.html

vue抽奖组件之九宫格

摘要：写在前面本人自从事前端工作以来，每每遇到技术问题后，都是向百度谷歌求教，久而久之便养成了伸手即来的本领。。。可能是出于懒的原因没错，就是因为懒，从未发表过技术文章或开发经验，深感惭愧，故洗心革面，决心分享一些东西。写在前面本人自从事前端工作以来，每每遇到技术问题后，都是向百度/谷歌求教，久而久之便养成了伸手即来的‘本领’。。。可能是出于‘懒’的原因（没错，就是因为懒），从未发表过技...

wenhai.he 2019-08-30 15:54 评论0 收藏0
vue开发微信商城项目总结之五--vue实现九宫格抽奖

摘要：根据产品提出的需求，需要做一个抽奖活动页面需求简介九宫格抽奖，中奖概率可配置，以九宫格转盘的形式进行抽奖，奖品分为三类，实物类奖品，收货人信息可编辑，默认为登陆用户，可生成订单福币类奖品，直接发放，可在交易明细中查看优惠劵类奖品，交易明细中根据产品提出的需求，需要做一个抽奖活动页面需求简介九宫格抽奖，中奖概率可配置，以九宫格转盘的形式进行抽奖，奖品分为三类，实物类奖品，收货人...

CoorChice 2019-08-21 16:51 评论0 收藏0
九宫格抽奖--手撸代码

摘要：总是看到类似的九宫格抽奖效果后来想自己手撸一个试一试吧。多多尝试万一成功了呢先来总结一下效果类似与跑马灯效果，闪动效果先快后慢。总是看到类似的九宫格抽奖效果,后来想自己手撸一个试一试吧。(多多尝试,万一成功了呢 github L6zt) 先来总结一下效果,类似与跑马灯效果，闪动效果先快后慢。代码解析如下所示：代码 0 ...

zhou_you 2019-08-23 13:13 评论0 收藏0
九宫格抽奖--手撸代码

摘要：总是看到类似的九宫格抽奖效果后来想自己手撸一个试一试吧。多多尝试万一成功了呢先来总结一下效果类似与跑马灯效果，闪动效果先快后慢。总是看到类似的九宫格抽奖效果,后来想自己手撸一个试一试吧。(多多尝试,万一成功了呢 github L6zt) 先来总结一下效果,类似与跑马灯效果，闪动效果先快后慢。代码解析如下所示：代码 0 ...

ChanceWong 2019-08-02 12:00 评论0 收藏0
jQuery实现九宫格抽奖游戏

摘要：九宫格抽奖游戏本项目在链接前端布局将未选中的和选中的图片定位好图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片定位的时候，按照逆时针，这样，在旋转的时候，可以容易控制图片表示选中图片的样式没有选中图片的样式逻辑端九宫格抽奖游戏本项目在github 链接前端布局将未选中的和选中的图片定位好 ...

tracy 2019-08-26 10:35 评论0 收藏0