前言
這段時(shí)間忙著找工作寫(xiě)畢業(yè)設(shè)計(jì)哥童，簡(jiǎn)書(shū)好久沒(méi)更新了祟霍。畢業(yè)設(shè)就是用Vue重構(gòu)了學(xué)院官網(wǎng)速缨，大致功能都完成了锌妻，完全實(shí)現(xiàn)了前后端分離。MOCK服務(wù)器也是在webpack基礎(chǔ)上搭建的旬牲，有空再寫(xiě)篇文章介紹一下仿粹，今天先分享Vue中的導(dǎo)航浮頂。
效果圖
實(shí)現(xiàn)思路
正常布局中取得導(dǎo)航欄的距離頂部的位置nav.offsetTop原茅，監(jiān)聽(tīng)屏幕滾動(dòng)牍陌，當(dāng)滾動(dòng)條的距離超過(guò)這個(gè)值時(shí)，將nav的position屬性改為fixed员咽。小于時(shí)變回原樣毒涧。思路上很簡(jiǎn)單。
Vue中的實(shí)現(xiàn)
我將navigation封裝為一個(gè)組件，用一個(gè)wrapper包裹住他契讲，這樣降低了耦合度仿吞。我只需要操作wrapper
在mounted鉤子函數(shù)中獲取導(dǎo)航欄距離頂部的距離，一定要在mounted以后獲取捡偏，否則會(huì)導(dǎo)致數(shù)據(jù)不正確
講獲取到的數(shù)據(jù)轉(zhuǎn)換為一個(gè)計(jì)算屬性唤冈，這樣不用重復(fù)的訪問(wèn)DOM樹(shù)，增強(qiáng)性能银伟。（其實(shí)沒(méi)多大性能損失）
我在mounted里面為全局添加滾動(dòng)事件你虹，這里是它的具體方法。通過(guò)$nextTick中重新獲取滾動(dòng)距離彤避，判斷滾動(dòng)條位置傅物，根據(jù)結(jié)果修改nav的樣式
最后
這只是畢業(yè)設(shè)計(jì)中的一小部分，整個(gè)畢業(yè)設(shè)計(jì)中琉预，我發(fā)現(xiàn)編碼不是太大問(wèn)題董饰，問(wèn)題是架構(gòu)的設(shè)計(jì)，不斷擴(kuò)充的路由表圆米，單組件的復(fù)用問(wèn)題卒暂。這些都屬于架構(gòu)層面，事前的思考不夠細(xì)致娄帖。
另一方面是服務(wù)器也祠。使用的就是webpack搭建的本地服務(wù)器，數(shù)據(jù)mock很方便近速，會(huì)在后面的文章中給大家介紹诈嘿。記得關(guān)注哦。
就是這樣：）
