用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的圖標，只能本身臨時胡亂畫一個了！

最後祝願全天下的程序員都能事業有成，家庭幸福，身體健康