页面头部抖动问题解决办法

最新推荐文章于 2024-02-02 10:00:54 发布
最新推荐文章于 2024-02-02 10:00:54 发布
阅读量188 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72443437/article/details/134068695
版权

页面头部我采取flex布局的方式，vue的框架+elementplus，

这种方式会造成页面的头部抖动，字体重叠问题；[现象的视频-头部抖动]

上原有问题的代码：

模版中的代码（没问题）：

<template>
    <div class="layout-container" >
        <header class="layout-header">
            <div class="header-left">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" text-color="#04fbfe"
                    active-text-color="#fff" background-color="transparent" router @select="selectMenu">
                    <!--<el-menu-item index="/home">首页</el-menu-item>-->
                    <!-- <el-menu-item
                        index="/mainframe"
                        v-if="userInfo.manualoiling === 1"
                        >设备管理</el-menu-item
                    >-->
                    <!-- style="left:-42%" -->
                    <el-menu-item index="/home">设备管理</el-menu-item>

                </el-menu>
                <div class="time">
                    <div class="time-icon"></div>
                    <span>{{ nowDate }}</span>
                </div>
            </div>
            <div class="header-center">小保当煤矿智能润滑监控系统</div>
            <div class="header-right">
                <div class="header-menu">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" text-color="#04fbfe"
                        active-text-color="#fff" background-color="transparent" router @select="selectMenu">
                        <!--<el-menu-item index="/statepreview"
                            ></el-menu-item
                        >-->
                        <el-menu-item></el-menu-item>
                        <el-menu-item index="/historydata">历史数据</el-menu-item>
                        <el-menu-item index="/setparams" v-if="userInfo.plcsetting === 1">参数设置</el-menu-item>
                        <el-menu-item index="/usermanage" v-if="userInfo.usermanager === 1">用户管理</el-menu-item>
                        <el-menu-item v-if="userInfo.singlepointstatusbrowse === 1"
                            index="/SuperControlPlatform">智能润滑监控平台</el-menu-item>
                        <!-- <el-menu-item
                            index="/IntellectLubeSuperControlPlatform"
                            >智能润滑监控平台</el-menu-item
                        >-->
                        <el-menu-item v-if="userInfo.singlepointmanager === 1"
                            index="/SinglePointDeviceManage">单点注油器设备管理</el-menu-item>
                        <!-- <el-menu-item
                            index="/MapTest"
                            >测试地图大屏展示</el-menu-item
                        >-->
                        <el-menu-item v-if="userInfo.singlepointdatamanager === 1"
                            index="/SinglePointPourIntoOil">单点注油</el-menu-item>
                        <el-menu-item v-if="userInfo.singlepointrepeatermanager === 1"
                            index="/MACData">中继网关信道管理</el-menu-item>
                        <!--<el-menu-item
                            index="/MainPage"
                            >主机列表</el-menu-item
                        >
                        <el-menu-item
                            index="/MainPageTwo"
                            >主机列表2</el-menu-item
                        >-->
                        <!--<el-menu-item
                            index="/MainPageThree"
                            >主机列表3</el-menu-item
                        >-->
                    </el-menu>
                </div>
                <el-dropdown @command="clickDropdown">
                    <span class="el-dropdown-link el-users-link">
                        {{ userInfo.username }}
                        <span class="user-icon"></span>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="exit">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </header>
        <div class="layout-main">
            <RouterView />
        </div>
        <div class="layout-footer"></div>
    </div>
</template>

js代码（没问题）：

<script setup lang="ts">
import { RouterView, useRoute, useRouter } from 'vue-router';
import { ref, onMounted, onBeforeUnmount, onBeforeMount } from 'vue';
import { ElMessage } from 'element-plus';
//import { el } from 'element-plus/es/locale';
import { ValidateToken, GetTokenByID } from '@/api/login-api';
const route = useRoute();
const router = useRouter();

const activeIndex = ref('');

const getQueryString = (name: string) => {
    let geturl = window.location.href;
    let getqyinfo = geturl.split('?')[1]   //qycode=1001&qyname=%E4%BC%81%E4%B8%9A%E5%BF%99   截取到参数部分
    let getqys = new URLSearchParams('?' + getqyinfo)  //将参数放在URLSearchParams函数中
    return getqys.get(name);  //1001   
}
onBeforeMount(async () => {
    if (window.TokenMethod === 1) {

        if (localStorage.getItem('token') as string) {
            debugger;
            let params = { Token: localStorage.getItem('token') as string };
            const { data: res } = await ValidateToken(params);

            userInfo.value = res.userInfo;
            if (!userInfo.value) {
                ElMessage.error('请登录后再访问');
                router.push('/login');
            }
        }
        else {

            var TokenId = getQueryString('TokenID');
            let params = { ID: TokenId };
            const { data: res } = await GetTokenByID(params);
            if (res.data.length > 0) {
                localStorage.setItem('token', res.data[0].TokenValue);
                let paramss = { Token: localStorage.getItem('token') as string };
                const { data: ress } = await ValidateToken(paramss);

                userInfo.value = ress.userInfo;
                if (!userInfo.value) {
                    ElMessage.error('请登录后再访问');
                    router.push('/login');
                }
            }
            else {
                ElMessage.error('请登录后再访问');
                router.push('/login');
            }

        }
    }
    else {
        userInfo.value = JSON.parse(sessionStorage.getItem('dyuser') as string);
    }
    // console.log(userInfo.value.usermanager);
    // if (!userInfo.value) {
    //     ElMessage.error('请登录后再访问');
    //     router.push('/login');
    // }
});

onMounted(() => {
    activeIndex.value = route.path;
    getNowDate();
    currentTime();
});

onBeforeUnmount(() => {
    // 清除时间
    if (getNowDate) {
        clearInterval(getNowDate as any);
    }
});

const userInfo = ref();

// 下拉框点击
const clickDropdown = (item: string) => {
    if (item === 'exit') {
        router.push('/login');
        sessionStorage.removeItem('dyuser');
        localStorage.removeItem('token');
    }
};

// 菜单选中
const selectMenu = (index: string) => {
    activeIndex.value = index;
};

// 当前时间
const nowDate = ref('');
// 获取当前时间
const getNowDate = () => {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1; // 月
    let day = date.getDate();
    let week = date.getDay();
    let weekArr = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
    ];
    let hour: any = date.getHours();
    hour = hour < 10 ? '0' + hour : hour;
    let minute: any = date.getMinutes();
    minute = minute < 10 ? '0' + minute : minute;

    nowDate.value = `${year}/${month}/${day} ${hour}:${minute} ${weekArr[week]}`;
};

// 定时刷新时间
const currentTime = () => {
    setInterval(getNowDate, 10000);
};
</script>

css代码（看头部的layout-header）：

<style lang="scss" scope>
[v-cloak] {
    display: none !important;
}

.layout-container {
    min-height: 100vh;
    background: url('../assets/images/common-images/bg.jpg') no-repeat center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}

.layout-header {
    // min-height: 70px;
    height: 70px;
    background: url('../assets/images/common-images/header.png') no-repeat center;
    background-size: 100% 100%;
    display: flex;//因为flex布局造成宽度不足，会出现头部抖动，解决办法就是给一个100%的宽度


    >div {
        flex: 1;
        color: aliceblue;
    }

    .header-left {
        margin: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
        color: #04fbfe;
        font-size: 18px;

        .time {
            display: flex;
            padding-right: 5px;

            .time-icon {
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 10px;
                background: url('../assets/images/common-images/icon_clock.png') no-repeat center;
                background-size: contain;
            }

            .week {
                margin-left: 5px;
                font-size: 12px;
            }
        }

        .weather {
            display: flex;
            align-items: center;

            .weather-icon {
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 10px;
                background: url('../assets/images/common-images/icon_weather.png') no-repeat center;
                background-size: cover;
            }
        }

        .envir-label {
            font-size: 12px;
            margin-right: 10px;
        }

        .air-num {
            color: #fd9203;
        }

        .el-menu {
            flex: 1;
        }
    }

    .header-right {
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;
        color: #04fbfe;

        .header-menu {
            flex: 1;
            // display: flex;
            justify-content: space-evenly;

            .el-menu-item {
                font-size: 16px;
            }

            span {
                flex: 1;
                text-align: center;
                cursor: pointer;
                line-height: 1;
                letter-spacing: 2px;
                font-size: 18px;
            }

            span+span {
                border-left: 1px solid;
            }
        }
    }

    .header-center {
        font-size: 30px;
        font-weight: 700;
        display: grid;
        place-items: center;
        letter-spacing: 5px;
        transform: translateY(-12%);
    }

    .el-users-link {
        cursor: pointer;
        color: #04fbfe;
        display: flex;
        align-items: center;
        font-size: 16px;

        .user-icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-left: 10px;
            background: url('../assets/images/common-images/icon_user.png') no-repeat center;
            background-size: contain;
        }
    }
}

.layout-main {
    color: #fff;
    padding: 0 20px;
    // padding-bottom: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1;
}

.el-menu {
    background-color: transparent;
    border-bottom: 0;
    justify-content: space-evenly;

    .el-menu-item {
        font-size: 16px;
        border-bottom: 0;
    }

    .el-menu-item.is-active {
        border-bottom: 0;
        background-color: rgba($color: #000000, $alpha: 0.3);
    }
}

.layout-footer {
    color: #04fbfe;
    font-size: 14px;
    text-align: right;
    letter-spacing: 2px;
    margin-bottom: 5px;
    margin-right: 20px;
}
</style>

解决后的代码css：

<style lang="scss" scope>


.layout-container {
    min-height: 100vh;
    background: url('../assets/images/common-images/bg.jpg') no-repeat center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}

.layout-header {
    width: 100%;
    // min-height: 70px;
    height: 70px;
    background: url('../assets/images/common-images/header.png') no-repeat center;
    background-size: 100% 100%;
    display: flex;


    >div {
        flex: 1;
        color: aliceblue;
    }

    .header-left {
        margin: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
        color: #04fbfe;
        font-size: 18px;

        .time {
            display: flex;
            padding-right: 5px;

            .time-icon {
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 10px;
                background: url('../assets/images/common-images/icon_clock.png') no-repeat center;
                background-size: contain;
            }

            .week {
                margin-left: 5px;
                font-size: 12px;
            }
        }

        .weather {
            display: flex;
            align-items: center;

            .weather-icon {
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 10px;
                background: url('../assets/images/common-images/icon_weather.png') no-repeat center;
                background-size: cover;
            }
        }

        .envir-label {
            font-size: 12px;
            margin-right: 10px;
        }

        .air-num {
            color: #fd9203;
        }

        .el-menu {
            flex: 1;
        }
    }

    .header-right {
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;
        color: #04fbfe;

        .header-menu {
            flex: 1;
            // display: flex;
            justify-content: space-evenly;

            .el-menu-item {
                font-size: 16px;
            }

            span {
                flex: 1;
                text-align: center;
                cursor: pointer;
                line-height: 1;
                letter-spacing: 2px;
                font-size: 18px;
            }

            span+span {
                border-left: 1px solid;
            }
        }
    }

    .header-center {
        font-size: 30px;
        font-weight: 700;
        display: grid;
        place-items: center;
        letter-spacing: 5px;
        transform: translateY(-12%);
    }

    .el-users-link {
        cursor: pointer;
        color: #04fbfe;
        display: flex;
        align-items: center;
        font-size: 16px;

        .user-icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-left: 10px;
            background: url('../assets/images/common-images/icon_user.png') no-repeat center;
            background-size: contain;
        }
    }
}

.layout-main {
    color: #fff;
    padding: 0 20px;
    // padding-bottom: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1;
}

.el-menu {
    background-color: transparent;
    border-bottom: 0;
    justify-content: space-evenly;

    .el-menu-item {
        font-size: 16px;
        border-bottom: 0;
    }

    .el-menu-item.is-active {
        border-bottom: 0;
        background-color: rgba($color: #000000, $alpha: 0.3);
    }
}

.layout-footer {
    color: #04fbfe;
    font-size: 14px;
    text-align: right;
    letter-spacing: 2px;
    margin-bottom: 5px;
    margin-right: 20px;
}
</style>

朵子爱蔬菜
关注
解决CoordinatorLayout的动画抖动以及回弹问题
JasonGaoH的专栏
10-12 3675
在使用CoordinatorLayout来实现Android中的一种吸顶的时候，遇到了两个CoordinatorLayout的滑动问题，这里做下记录。 这里使用CoordinatorLayout实现的是一个tab吸顶的效果，类似淘宝，京东首页的一个效果。 头部区域展示各种类型banner卡片，中间是类似TabLayout的可点击tab，下面是feed卡片，可以一直下拉加载，并且feed卡片区域使用...
ios微信小程序table头部与左侧固定双重滚动会抖动的坑，解决思路
久如云漂泊
12-20 1194
这里还会有一个坑，前面说了scroll本身有延时；当滚动b容器到顶部的时候手指离开后。会有概率导致a表还没有滚动到顶部；获取a表的滚动位置和b容器的滚动位置；用来显示的表我们称为a表。用来滚动的表我们称为b容器，b容器是一个与a表宽高位置完全一致的容器。他将覆盖在a表的上层。既然假thead比真表身滚动时无法对齐。正常情况是左右滑动时，左侧固定不动，上下滑动时表头不动；第一个坑是他有一个ios自带的橡胶上下回弹效果。导致滚动时整个表都跟着回弹；想要和安卓一样的效果，滑动y，x轴，每次只有一个方向滚动；
css3 使用flex时，头部出现抖动问题解决方法
肖帅的博客
04-23 2053
问题描述：在开发中发现头部出现抖动现象，造成抖动的现象有多个，如下： ①，页面中使用v-if和v-else时 同时使用img标签，img标签的宽度不同，会有抖动现象 ②，使用css3使用flex布局时，造成抖动现象。解决方法如下： 使用 min-height 可解决问题（ps:这个问题是在我项目环境下解决的，不同的问题可能是不同的环境下造成的） ...
如何解决el-drawer抽屉组件打开时的抖动现象
XiongFine的博客
04-03 3330
el-drawer 打开时有抖动现象解决办法
Element-Plus中menu菜单无法正常收缩问题
weixin_43737647的博客
07-24 1064
原因如下图，在把菜单menu动态封装为组件时，新建的文件中，会自动生成div标签，在不记得删除的情况下就会导致层级嵌套错误，无法正常收缩，移除掉div标签后即可正常收缩。从代码对比看层级就不太对了，嵌套错误了，正常下方官网的ul标签下直接是li，在自己的代码中，ul标签下是div标签，层级嵌套错误，导致无法正常收缩。这是界面展示的情况，上面是自己开发的菜单，下面是官网的案例摘抄下来的，都是多层级菜单，官网的可以正常收缩，但是自己写的无法收缩。
Element ui可多选下拉框在浏览器分辨率缩小的情况下出现页面抖动闪烁
最新发布
weixin_48624392的博客
02-02 606
页面选择到三个选项时长度为三的时候就会开始抖动，其他长度没有问题，检索elements是发现选择第三个的时候他的select下的el-input-inner高度在89和90间频繁更换，element下拉多选时组件计算高度的问题，因为我这边项目页面整体缩放到了90%，所以计算出现了偏差.如果不生效可以加上::v-deep试一下。
操作系统16————虚拟存储器之抖动，工作集和页面置换算法
冰炭不投day的博客
02-02 6991
操作系统16————虚拟存储器之抖动，工作集和页面置换算法 一.目录 操作系统16————虚拟存储器之抖动，工作集和页面置换算法 一.目录 二.多道程序度与抖动 1.抖动 2.多道程序度 3.产生抖动的原因 4.抖动的预防方法 三.工作集 1. 工作集的引入 2.工作集的特点 四.页面置换算法 1. 最佳置换算法(OPT)(理想算法) 2.先进先出置换算法(FIFO) 3....
fixed定位窗口出现抖动的情况如何解决？
weixin_34357887的博客
01-07 1163
2019独角兽企业重金招聘Python工程师标准>>> ...
【已解决】IOS设备中position:fixed抖动问题
Linda的前端开发路
06-13 4805
IOS设备中position:fixed抖动问题的解决方案
element 菜单栏收缩时卡顿一下解决办法
weixin_47438917的博客
12-05 1858
element 菜单栏收缩时卡顿一下解决办法
移动端重构系列3——整体布局
StarsInSun的专栏
07-23 784
移动端和pc端一样整体上布局也可以分为上中下三部分，如图： 一般来说,header和footer部分都为fixed定位，中间的内容区域可滚动。 fixed布局 常规的结构如下： ... 因为移动端单页面特性，所以每个page为一个页面，然后整体使用wrap-page包裹。考虑到可滚动的为page内容，所以我们得给wrap-page一个具体的高
css解决文字抖动问题
SiShen654的博客
07-10 2461
当点击选中时，文字会发生跳动问题坍台，原因是使用了CSS3动画导致高度坍塌计算不准，解决如下： 在使用CSS3变化属性，可能涉及该元素3d的变化，而3d又有正反面之分，导致计算高度时，高度在不断变化，才会产生抖动效果。 下面属性含义：当元素背面朝向观察者时是否可见。将其设置为隐藏，可将不断变化的高度不显示出来。 backface-visibility: hidden; // 兼容写法 -webkit-backface-visibility: hidden; 父属性：使用了transform变形
flex布局（滚动条问题）
weixin_44042792的博客
11-25 1070
1.flex布局有时候overflow: auto不生效，解决办法如下。
flex-DataGrid滚动条特别卡的解决方法
As_Js_Python的专栏
08-05 830
转自：http://blog.csdn.net/yfisaboy/article/details/8181995 亲自测试过，而且该方法和其他的自定义的datagrid并无冲突，可以在你原来的基础上增加优化的这一系列代码，确实快很多。
因滚动条导致的页面抖动
Podenco的博客
05-09 1848
因滚动条的出现导致的页面抖动问题 问题描述如下 （此处采用的下拉菜单为w3school中的模板套用修改，原文链接） 这是一个最大化情况下正常的页面，右上角为下拉菜单，可以看到，专辑菜单的下拉界面非常长。 接下来将浏览器窗口化，可以看到此时还没有滚动条 接下来鼠标瞄准专辑时就出现了滚动条。但是滚动条会占据浏览器水平位置的一定空间，而我的下拉菜单又是采用float进行布局的，因而滚动条的产生会导致我下拉菜单位置发生相应变化（左移）。而在鼠标已经瞄准专辑的情况下右移瞄准成员，就会导致滚动条消失，此时浮动的标
解决因出现滚动条导致页面抖动
热门推荐
Rey
08-24 1万+
现在大多数页面都是采用主体内容水平居中布局&lt;body&gt; &lt;div&gt;&lt;/div&gt; &lt;/body&gt;div{ width:1200px; margin:0 auto; }但是，这种布局存在一个问题。现在的浏览器滚动条默认是overflow:auto类型的，也就是说如果内容高度不足一屏，没有滚动条；如果超出才会出现滚动条。于是，问题来了：信息流页...
随笔——elmentUI的组件使用遇到的一些问题
SundayGoG的博客
08-19 1180
伸缩折叠抖动问题、折叠后菜单文字依然显示、折叠后el-aside区域没有相应折叠
element-ui布局容器aside左边框点击时会跳动原因及修改
前端职场小白_炜晨科技的博客
08-13 469
原因: 少1像素(控制台可以看到)解决:
【vue3+elementplus】解决切换el-menu-item，el-menu组件会抖动的问题
bbt953的博客
08-09 1358
解决切换el-menu-item，el-menu组件会抖动的问题
开发 微信小程序页面抖动怎么解决
06-01
微信小程序页面抖动的原因可能有很多，以下是常见的几种可能的解决方法： 1. 减少页面渲染次数：可以通过优化页面结构和减少不必要的样式和组件，减少页面渲染次数，从而减少抖动的发生。 2. 使用 CSS3 动画：使用 CSS3 动画比使用 JavaScript 实现动画更加流畅，可以减少抖动的出现。 3. 避免频繁操作 DOM：频繁操作 DOM 会导致页面的重绘和重新布局，从而增加页面抖动的可能性。可以通过缓存 DOM 节点、合并 DOM 操作等方式来避免频繁操作 DOM。 4. 使用 requestAnimationFrame：使用 requestAnimationFrame 可以让页面在下一次重绘之前执行动画，从而减少抖动的出现。 5. 避免使用过多的透明度和阴影效果：透明度和阴影效果会导致页面重绘和重新布局，从而增加页面抖动的可能性。可以适当减少透明度和阴影效果的使用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值