学了这么久的vue和express知识,当然也想着要找一份合适的工作,抱着希望去投简历,但一想作为一个程序员,把用word写的简历投过去是不是显得太LOW了啊,于是决定自己写一个网页版的简历,顺便放到githubPages上

选择一个风格

因为既然是简历还是想着简洁一点的好,所以想着写个类似H5一样的页面,使用鼠标滚动切换页面,这样主要也就用到animate.css结合vue的动画过渡

地址

遇到的问题

1、因为使用鼠标滚轮切换页面,以前对@mousewheel这样的原生行为理解不够深,然后翻了不少资料,主要是判断鼠标滚动是向上还是向下。结果找到一堆乱七八糟的结果,最后还是决定自己想想办法,然后我把滚动事件打出来一看,发现这其实是一目了然的啊,直接判断event.deltaY的值就行了啊!

// 判断滚动方向进行操作

if (event.deltaY > 0) {

console.log('down')

if (this.init === 4) {

this.init = 1

} else {

this.init = this.init + 1

}

} else {

console.log('up')

if (this.init === 1) {

this.init = 4

} else {

this.init = this.init - 1

}

}

2、 写完这里滚动切换页面,感觉很舒服,高兴之下多滚动了几次,结果这页面刷刷刷的过去了,一看这样不对啊,得来个限制,不能短时间内连续滚动,如果连续滚动则认为是无效的滚动行为,同样还是把这个事件打出来,发现了event.timeStamp这个属性,但这个属性是记录滚动行为发生的时间,从这个页面创建的时候开始计算以毫秒为单位,但我需要的是两次滚动行为发生的间隔时间。所以用一个折中的办法,记录上一次有效滚动的时间,这一次发生滚动事件时用这一次发生的时间减去上一次有效滚动的时间,就得出了滚动间隔,然后判断这个滚动间隔符合要求就认为是合法滚动,不符合就认为是无效的滚动行为

代码:

// 防止用户短时间内滚动多次,设置滚动间隔大于一秒才能生效

// 判断滚动间隔时间

let scrollduration = event.timeStamp - this.lastscroll

console.log(scrollduration)

if (scrollduration > 1000) {

// 将这一次的滚动时间记录为上一次合法的滚动时间

this.lastscroll = event.timeStamp

console.log('合法的滚动')

// 判断滚动方向进行操作

if (event.deltaY > 0) {

console.log('down')

if (this.init === 4) {

this.init = 1

} else {

this.init = this.init + 1

}

} else {

console.log('up')

if (this.init === 1) {

this.init = 4

} else {

this.init = this.init - 1

}

}

} else {

// 如果滚动不合法就不做任何操作

console.log('请爱护你的鼠标不要连续滚动!')

}

关于过渡动画

vue文档已经写得很明白,如何组合就看个人的艺术天分了,借用文档里面的一句话:

唯一的限制就是你的想象力

还有吐槽一下iconfont上居然找不到segmentfault的图标,只能自己临时胡乱画一个了!

最后祝愿全天下的程序员都能事业有成,家庭幸福,身体健康

java简历vue专业技能_用vue 写一个好看的个人简历相关推荐

  1. 简历计算机系专业技能怎么写,j计算机类的简历专业技能怎么写

    类似问题答案 计算机专业的求职简历中专业技能描述怎么写啊 Java:1. 全面掌握Java语言及面向对象的设计思想.2. 熟悉JSP,Servlet,JavaBean等J2EE的核心技术.3. 熟练使 ...

  2. 简历的专业技能怎么写?排版需要注意的事项

    一.简历的专业技能怎么写? 首先,先问一下你自己会什么,然后看看你意向的公司需要什么.一般HR可能并不太懂技术,所以他在筛选简历的时候可能就盯着你专业技能的关键词来看.对于公司有要求而你不会的技能,你 ...

  3. java简历的专业技能_java开发实习生简历专业技能怎么写

    专业技能(案例一) Struts.Spring.Hibernate.Mybatis等框架. Servlet.Jsp.JDBC.javaScript.CSS..HTML.El.JSTL.Ajax.jso ...

  4. java简历的专业技能怎么写,程序员简历专业技能怎么写

    专业技能(案例一) 开发技能:oop,jdbc线程,集合,io,设计模式 JavaWeb:servlet,cookie,session,html,jsp,(SMTP POP3 TCP UDP HTTP ...

  5. 计算机的专业技能,【计算机能力描述怎么填写】_计算机专业的求职简历中专业技能描述怎么写啊...

    刘娇 雾岛 , 大神来也 -点赞. 计算机的学弟(学妹)啊,除了专业技能的话其他栏目都会写了吗. 既然今天回答了我就多分享一些把哈哈: 言归正传,专业技能方面的话给你发一个比较全面的描述吧,你可以从中 ...

  6. axios vue 回调函数_前端Vue 面试题大全

    点蓝色字关注"程序员报刊" 「  学习 新闻 招聘 」 vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类 ...

  7. 【转自知乎】软件实施工程师-简历范文,【工作经历+项目经验+专业技能+自我评价】怎么写

    作者:Leon 链接:https://zhuanlan.zhihu.com/p/125746595 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 基本信息 姓名:x ...

  8. vue filter对象_学习vue源码(3) 手写Vue.directive、Vue.filter、Vue.component方法

    一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...

  9. vue tree组件_使用Vue 3.0做JSX(TSX)风格的组件开发

    前言 我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...

  10. vue 井号_使用Vue 2制作井字游戏:第1部分

    vue 井号 This tutorial assumes that you have a little prior knowledge of JavaScript and the Vue framew ...

最新文章

  1. 无缓冲 Chan 的发送和接收是否同步
  2. OC基础 代理和协议
  3. 计算机电路基础学什么,"计算机电路基础"学习辅导.doc
  4. UDP Socket编程 C/C++实现 (Windows Platform SDK)
  5. Centos7忘记密码——转
  6. 数据库设计(关系型)
  7. Servlet具体解释
  8. 关于面试 | 面试官
  9. .net mysql limit 分页原理_浅谈MySQL分页Limit的性能问题
  10. HashMap源码剖析(代码基于JDK11)
  11. 如何在Arduino上使用OV7670摄像头模块
  12. OpenStack环境下安装Mistral
  13. QListWidget自定义item的两种方式(二)——使用QWidget作为item
  14. LeetCode-----第113题-----路径总和 II
  15. 泰坦尼克号生还率预测分析
  16. HTML基础常见面试题
  17. youtube爬虫搭建
  18. 数据挖掘实战—家用热水器用户行为分析与事件识别
  19. 无线通信学习笔记(一)
  20. uniapp 播放视频

热门文章

  1. 使用idea和gradle编译spring5源码
  2. matlab生成面导出stl格式,导出建模文件到STL格式时需要注意的问题
  3. 人员基础信息一体化采集系统平台
  4. 计算机基础知识2019题库,2019年计算机基础考试题库(含答案)全
  5. 全面解析免费及收费SSH工具的基本特性和总结
  6. 永洪BI强制显示移动端布局
  7. CodeBlocks新手安装以及汉化(20,03版本)
  8. 基于STM32和ESP8266的智能灌溉系统【土壤湿度监测继电器OLED显示WIFI控制器APP水泵】
  9. react-color颜色选择器
  10. launchpad乐器_一起认识 Launchpad 系列——中篇