前言
這段時間忙著找工作寫畢業設計，簡書好久沒更新了。畢業設就是用Vue重構了學院官網，大致功能都完成了，完全實現了前后端分離。MOCK服務器也是在webpack基礎上搭建的，有空再寫篇文章介紹一下，今天先分享Vue中的導航浮頂。
效果圖
正常位置.png
導航浮頂.png
實現思路
正常布局中取得導航欄的距離頂部的位置nav.offsetTop，監聽屏幕滾動，當滾動條的距離超過這個值時，將nav的position屬性改為fixed。小于時變回原樣。思路上很簡單。
Vue中的實現
DOM部分
我將navigation封裝為一個組件，用一個wrapper包裹住他，這樣降低了耦合度。我只需要操作wrapper
mounted.png
在mounted鉤子函數中獲取導航欄距離頂部的距離，一定要在mounted以后獲取，否則會導致數據不正確
計算屬性.png
講獲取到的數據轉換為一個計算屬性，這樣不用重復的訪問DOM樹，增強性能。（其實沒多大性能損失）
fix方法.png
我在mounted里面為全局添加滾動事件，這里是它的具體方法。通過$nextTick中重新獲取滾動距離，判斷滾動條位置，根據結果修改nav的樣式
最后
這只是畢業設計中的一小部分，整個畢業設計中，我發現編碼不是太大問題，問題是架構的設計，不斷擴充的路由表，單組件的復用問題。這些都屬于架構層面，事前的思考不夠細致。
另一方面是服務器。使用的就是webpack搭建的本地服務器，數據mock很方便，會在后面的文章中給大家介紹。記得關注哦。
就是這樣：）
