uni-app 路由跳转再返回时不断增加css样式

uni-app 路由跳转再返回时不断增加css样式

项目 信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.15
浏览器平台 QQ内置浏览器
浏览器版本 10.8
项目创建方式 HBuilderX

操作步骤：

页面跳转再返回 重复操作
将会不断增加
每重复一次增加一条

预期结果：

不增加

实际结果：

页面跳转再返回 重复操作
将会不断增加
每重复一次增加一条

bug描述：

页面跳转再返回 重复操作
将会不断增加

<style type="text/css">
.uni-app--showtabbar uni-page-wrapper {  
    display: block;  
    height: calc(100% - 50px);  
    height: calc(100% - 50px - constant(safe-area-inset-bottom));  
    height: calc(100% - 50px - env(safe-area-inset-bottom));  
}  
.uni-app--showtabbar uni-page-wrapper::after {  
    content: "";  
    display: block;  
    width: 100%;  
    height: 50px;  
    height: calc(50px + constant(safe-area-inset-bottom));  
    height: calc(50px + env(safe-area-inset-bottom));  
}  
.uni-app--showtabbar uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {  
    height: calc(100% - 44px - 50px);  
    height: calc(100% - 44px - constant(safe-area-inset-top) - 50px - constant(safe-area-inset-bottom));  
    height: calc(100% - 44px - env(safe-area-inset-top) - 50px - env(safe-area-inset-bottom));  
}
</style>

这个样式


更多关于uni-app 路由跳转再返回时不断增加css样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 路由跳转再返回时不断增加css样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是 uni-app 中常见的样式重复添加问题。当页面跳转再返回时，框架会重复注入相同的 CSS 样式到 DOM 中，导致样式规则不断叠加。

问题原因： uni-app 的路由机制在页面切换时，某些情况下会重复添加页面样式，特别是在 H5 平台和部分浏览器环境中。你提供的 CSS 代码是 uni-app 框架自动生成的 tabbar 相关样式，这些样式在每次页面返回时被重复插入到文档头部。

解决方案：

  1. 检查页面生命周期 确保在 onUnload 或 onHide 生命周期中清理自定义样式和事件监听器。

  2. 使用 scoped 样式 在页面的 style 标签中添加 scoped 属性：

<style scoped>
/* 页面样式 */
</style>
回到顶部