为了账号安全,请及时绑定邮箱和手机立即绑定

vue、react等SPA应用页脚组件闪烁的解决办法

大家好,我是木瓜太香。大家在开发单页应用的时候,经常会遇到这样的需求,头部和尾部两个组件是大多数组件公用的,而中间的内容区域则是单独存在的,而且一般内容组件逻辑会比较多,如果我们不停刷新页面可能会出现尾部组件闪烁的问题。

这个问题的出现主要是因为,内容区组件要比尾部组件大,而且尾部组件一般是没有什么逻辑的,相当于一个静态组件。

解决这个问题的思路就是想办法在页面最开始加载的时候隐藏尾部组件,之后再合适的时候将尾部组件显示出来即可。

说一下公司项目(VUE)中的解决办法,我们的思路是,先让尾部组件固定定位到页面外部,这样在最开始加载的时候就看不到尾部组件,然后我们通过监听路由变化来让组件显示,具体做法如下。

  1. 定义类名 .footer-fixed 将该类名添加到 footer 组件上

    .footer-fixed {
      position: fixed;
      bottom: -200px;
    }
    
  2. 利用 vue 中的 watch 监听路由,恢复 footer组件的显示

        $route: {
          handler () { // 组件加载完成之后将隐藏的底部显示出来
             const footerDom = document.getElementsByClassName('footer')[0]
             footerDom.classList.remove('footer-fixed')
          }
        }
    

当然你也可以使用路由的全局后置守卫做到同样的效果,不过我们当时考虑到的是逻辑相关性,所以才采用监控的方式。

更多前端技巧可以关注一下哔哩哔哩:木瓜太香

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消