uni-app 安卓平板官方tarbar上边框闪烁白边

uni-app 安卓平板官方tarbar上边框闪烁白边

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.9

手机系统：Android

手机系统版本号：Android 10

手机机型：安卓平板

页面类型：vue

打包方式：云端

示例代码：

"tabBar": {
"height":"60px",
"borderStyle": "white",
"backgroundColor": "#000000",
"color": "#F1F1F1",
"selectedColor": "#f33e54",
"fontSize": "12px",
"list": [{
"pagePath": "pages/task/index",
"iconPath": "static/img/tabbar/tasks.png",
"selectedIconPath": "static/img/tabbar/tasks_selected.png",
"text": "任务"
},
{
"pagePath": "pages/create/index",
"iconPath": "static/img/tabbar/add.png",
"selectedIconPath": "static/img/tabbar/addactive.png"
},
{
"pagePath": "pages/my/index",
"iconPath": "static/img/tabbar/me.png",
"selectedIconPath": "static/img/tabbar/my_active.png",
"text": "我的"
}
]
}
```

操作步骤：
```
偶发出现的，当停在一个页面一段时间后就会出现，切换到其他页面后正常；静待一段时间后再次出现
```

预期结果：
```
没有闪烁的白条
```

实际结果：
```
没有闪烁的白条
```

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211007/867403a7551fdc312dc5d0ce9a2d8225.gif)

更多关于uni-app 安卓平板官方tarbar上边框闪烁白边的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好 后来解决了吗？怎么解决的

更多关于uni-app 安卓平板官方tarbar上边框闪烁白边的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常是由于Android平板的系统WebView渲染机制导致的。在uni-app中，tabBar在Android平板上可能会出现顶部边框闪烁或白边的问题，尤其是在页面停留一段时间后。

主要原因是Android系统的WebView在渲染tabBar时，可能会因为硬件加速或图层合成的问题导致边框显示异常。这通常是一个偶发性问题，与设备的GPU渲染机制有关。

解决这个问题可以尝试以下几种方法：

  1. 调整tabBar样式：

    "tabBar": {
  "borderStyle": "black",
  "backgroundColor": "#000000"
}

    将borderStyle设置为与背景色相近的颜色，可以减少白边的视觉影响。

  2. 添加CSS修复： 在App.vue的全局样式中添加：

    ::v-deep .uni-tabbar {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
回到顶部