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

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

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

说一下公司项目(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. nginx多个server的配置,同一端口

    nginx多个server的配置,同一端口 #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/e ...

  2. CI4框架应用四 - 第一个页面

    我们来看一下CI4框架的默认页面是如何实现的. 我们先来认识一下路由文件(app\Config\Routes.php),这个文件非常重要,且功能强大,它定义了URL模式及响应处理方法,我们先看一下这个 ...

  3. Paper English

    论文中的英语 单词 a arange 整理 ambiguity 含糊的 aggregate 总量 auxiliary 辅助的 alleviate 缓解 aberrant 异常的 akin 类似的 Ac ...

  4. Python中对象实例的__dict__属性

    实例的__dict__并不是一个方法,而是存储与该实例相关的实例属性的字典,对类中定义的方法(函数),方法名也是属性变量,类的__dict__存储所有实例共享的变量和函数(类属性,方法等),类的__d ...

  5. C#算法设计查找篇之01-顺序查找

    顺序查找(Sequential Search) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/697 访问. 顺序查找也 ...

  6. Vue watch 深层监听

    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...

  7. 浏览器自动化的一些体会2 webBrowser控件之ajax

    上个帖子简要讨论了浏览器自动化的几种方法.现在讨论webBrowser控件使用中的一些问题.基本的操作就不详细说了,随便网上找个帖子或找本书都有介绍的.这里只写点网上似乎少有人总结过的内容,以及自己的 ...

  8. 用WEB方式开发WPF桌面程序

    因为疫情影响,公司裁员,结束了一年多的web开发经历,重新开始做桌面,新公司用的是WPF(居然用的是winform style...),当然这跟本文没有关系...上篇博客写的用后台api和前台浏览器控 ...

  9. WIN10家庭版安装ORACLE的问题

    第一次安装成功后可启动ORACLE服务,重启计算机后服务监听无法启动,建议替换系统

  10. SpringCloude简记_part3

    18. SpringCloud Alibaba Sentinel实现熔断与限流 18.1 Sentiel 官网 https://github.com/alibaba/Sentinel 中文 https ...