从吸顶效果来说明vue的生命周期:

吸顶效果是什么?

没有滚动时,小导航栏和顶部有距离。如图一。但是,当页面开始滚动时,我们希望导航栏依旧存在,如图二。

从实现吸顶效果看vue生命周期

​ 图一

从实现吸顶效果看vue生命周期

​ 图二

分析一下,如果想要实现这个效果,就要在滚动的时候判断高度。一旦高度小于了某个值,就改变导航栏的样式。

那么,在view的哪个阶段我们才能获取到dom的数据呢?

答案是mounted挂载之后。

从实现吸顶效果看vue生命周期

代码可以参考该链接。https://www.jianshu.com/p/3e769dade7b3

相关文章: