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

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

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

说一下公司项目(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')
    }
    }

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

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

有前端问题需要讨论的可以加我的qun:237871108。也可以通过哔哩哔哩搜索木瓜太香找到我。

vue、react等SPA应用页脚组件闪烁的解决办法的更多相关文章

  1. 在vue中使用 layui框架中的form.render()无效解决办法

    下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法. 原文地址:小时刻个人技术博客 > http://small.aiweimeng.top/index.php ...

  2. fullpage在vue单页面当中使用会出现的问题以及解决办法

    在 vue 单页面当中发现fullpage会报错,报错信息大概意思为,fullpage不允许初始化多次. 解决办法,在使用fullpage的组件跳转路由进入销毁组件之前的生命周期的时候对fullpag ...

  3. vue 跳转页面返回时tab状态有误的解决办法

    一.前言 最近在做新vue项目的时候遇到了一个问题,就是tab间的切换没有问题,当跳转到其他页面时,且这个页面并非子路由,再用浏览器的返回按钮返回首页时,tab的active始终指向默认的第一个选项. ...

  4. dedecms专题列表页不显示标题的解决办法

    在网站专题中的标题都是比较长的,所以在调用title的时候没有使用title而是使用fulltitle的,fulltitle在其他的模型中都是可以正常使用的,也可以调用出字段,但是在专题中就没有调用出 ...

  5. 检索 COM 类工厂中 CLSID 为 {{10020200-E260-11CF-AE68-00AA004A34D5}} 的组件时失败解决办法

    检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下: 第一步:首先将msvcr71.dll,  SQLDM ...

  6. vue页面加载前显示{{代码}}的原因及解决办法

    进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...

  7. Visual Studio《加载此属性页时出错》的解决办法

    打开aspx页面时不能切换到设计视图,vs 2008工具箱中无控件.打开vs 2008的工具>选项>HTML设计器时提示:加载此属性页时出错 有时还会有其它错误提示,比如打开一个Windo ...

  8. firefox在引入vue.js后不支持e=e||window.event的解决办法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. VC++2010组件安装失败解决办法

    安装SQLSERVER时,安装不上,总是报错说 VC++2010组件安装错误. 单独安装时,也会报出严重错误无法安装.就是下面这两个 最后到网上找到一个办法解决了:如下: 下载这个软件 Microso ...

随机推荐

  1. 铁大树洞APP视频讲解和原型演示

    首先放上我们团队视频讲解演示的视频:https://v.youku.com/v_show/id_XNDYyMzA3MTgzNg==.html 团队名称:超能陆战队 团队成员:刘梦鑫(队长) 段行行 徐 ...

  2. 操作属性、操作样式 - DOM编程

    1. 操作属性 1.1 HTML 属性与 DOM 属性的对应 <div> <label for="username">User Name: </lab ...

  3. JS DOM笔记

    js的组成     ECMAScript:JS的语法     DOM:页面文档对象模型     BOM:浏览器对象模型     web APIs     是浏览器提供的一套操作浏览器功能和页面元素的A ...

  4. 18、Java中的 数据结构

    Java2中引入了新的数据结构 集合框架 Collection,下一节再谈论(非常重要,面试也常问). 1.枚举 (Enumeration) 1.1 Enumeration 源码: public in ...

  5. SpringCloud Sidecar 整合.Net WebApi

    在整合.Net的过程中遇到不少问题,一般网上的例子只是调用一个简单的NodeJS示例,并未有详细的介绍及采坑过程. 首先,我的项目结构是:Vue前端 + SpringCloud后端 + .Net的We ...

  6. java 启动Tomcat报错:The specified JRE installation does not exist

    启动TomCat服务报错: The specified JRE installation does not exist 解决方法: Eclipse:window->perferences-> ...

  7. 面试官:怎么做JDK8的垃圾收集器的调优?

    面试官:怎么做JDK8的垃圾收集器的调优? 看着面试官真诚的眼神,心中暗想看起来年纪轻轻却提出如此直击灵魂的问题.擦了擦额头上汗,我稍微调整了一下紧张的情绪,对面试官说: 在JDK8中有Serial收 ...

  8. 怎么写简历,简历才不会被丢到非洲&#127757;

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 最近的三歪朋友圈可以看到很多的字节.腾讯的同学都 ...

  9. [持续更新]——关于C++的一些可能会常用的函数

    写在前面 这些函数都是我和朋友一点一点写出来的,可能部分代码会有点雷同,但大部分代码都是自我总结出来的.目前包含的函数功能分别是: 1.设置控制台颜色 2.设置控制台光标位置 3.隐藏控制台光标 4. ...

  10. 导出Excel文件(项目中会遇到很多将一些数据导出Excel或者et)

    最近在项目中,遇到一些需求,就是将数据导出来,以Excel文件为主:就自己简单的做一些demo:供初学者来学习: // 定义一个保存文件的路径位置 SaveFileDialog dlgPath = n ...