Vue:Vue中的导航浮顶

前言

这段时间忙着找工作写毕业设计，简书好久没更新了。毕业设就是用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很方便，会在后面的文章中给大家介绍。记得关注哦。 就是这样：）