用vue 写一个好看的我的简历

学了这么久的vue和express知识，固然也想着要找一份合适的工做，抱着但愿去投简历，但一想做为一个程序员，把用word写的简历投过去是否是显得太LOW了啊，因而决定本身写一个网页版的简历，顺便放到githubPages上

选择一个风格

由于既然是简历仍是想着简洁一点的好，因此想着写个相似H5同样的页面，使用鼠标滚动切换页面，这样主要也就用到animate.css结合vue的动画过渡

地址

github:https://github.com/lyttonlee/...
在线演示：https://lyttonlee.github.io/

遇到的问题

一、由于使用鼠标滚轮切换页面，之前对@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
  }
}

二、 写完这里滚动切换页面，感受很舒服，高兴之下多滚动了几回，结果这页面刷刷刷的过去了，一看这样不对啊，得来个限制，不能短期内连续滚动，若是连续滚动则认为是无效的滚动行为，一样仍是把这个事件打出来，发现了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的图标，只能本身临时胡乱画一个了！

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