vue、react等SPA应用页脚组件闪烁的解决办法
2024-09-01 03:27:35
大家好,我是木瓜太香。大家在开发单页应用的时候,经常会遇到这样的需求,头部和尾部两个组件是大多数组件公用的,而中间的内容区域则是单独存在的,而且一般内容组件逻辑会比较多,如果我们不停刷新页面可能会出现尾部组件闪烁的问题。
这个问题的出现主要是因为,内容区组件要比尾部组件大,而且尾部组件一般是没有什么逻辑的,相当于一个静态组件。
解决这个问题的思路就是想办法在页面最开始加载的时候隐藏尾部组件,之后再合适的时候将尾部组件显示出来即可。
说一下公司项目(VUE)中的解决办法,我们的思路是,先让尾部组件固定定位到页面外部,这样在最开始加载的时候就看不到尾部组件,然后我们通过监听路由变化来让组件显示,具体做法如下。
定义类名
.footer-fixed
将该类名添加到footer
组件上.footer-fixed {
position: fixed;
bottom: -200px;
}
利用 vue 中的 watch 监听路由,恢复
footer
组件的显示$route: {
handler () { // 组件加载完成之后将隐藏的底部显示出来
const footerDom = document.getElementsByClassName('footer')[0]
footerDom.classList.remove('footer-fixed')
}
}
当然你也可以使用路由的全局后置守卫做到同样的效果,不过我们当时考虑到的是逻辑相关性,所以才采用监控的方式。
更多前端技巧可以关注一下哔哩哔哩:木瓜太香
有前端问题需要讨论的可以加我的qun:237871108。也可以通过哔哩哔哩搜索木瓜太香找到我。
最新文章
- 微信小程序(微信应用号)组件讲解
- weblogic启动错误
- Android TextView 常用技巧
- 【SQL】sql版Split函数。用于拆分字符串为单列表格
- Python学习笔记-Day2-Python基础之元组操作
- form表单生成的简单理解
- Javascript引擎单线程机制及setTimeout执行原理说明
- AlarmManager.RTC和ELAPSED_REALTIME的区别
- OpenSSL加解密
- Java面试06|项目相关介绍
- rest_framework 跨域和CORS
- python中os模块操作目录与文件名小结
- python计时器类
- hadoop内存配置方案
- Codeforces 808G Anthem of Berland - KMP - 动态规划
- Android自定义View学习(四)
- Hdu2255 奔小康赚大钱(二分图最大权匹配KM算法)
- [翻译] GiFHUD
- 转:完成端口(Completion Port)详解
- Getting SharePoint objects (spweb, splist, splistitem) from url string