提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

Vue 实现 效果 生命周期
2023-09-11 14:15:54 时间

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

吸顶效果是什么？

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

在这里插入图片描述

​ 图一

在这里插入图片描述

​ 图二

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

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

答案是mounted挂载之后。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cg8Pxcwa-1590048574571)(C:\Users\liuyaxin7\AppData\Roaming\Typora\typora-user-images\image-20200521160807592.png)]

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

相关文章