uni-app自定义底部tabbar只要是全新打开app首次点击tabbar都会闪动一两下才正常不闪

uni-app自定义底部tabbar只要是全新打开app首次点击tabbar都会闪动一两下才正常不闪

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

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：正式

HBuilderX版本号：4.75

手机系统：Android

手机系统版本号：Android 11

手机厂商：一加

手机机型：一加6t

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

我是使用uview2的 u-tabbar组件自定义做了下底部导航：
<u-tabbar
value="tabIndex"
mid-button="true"
active-color="selectedColor"
inactive-color="color"
border="false"
fixed="true"
placeholder="true"
safe-area-inset-bottom="true"
      class="jy-tabbar">
  <!-- 常规Tab项 -->
  <u-tabbar-item
    v-for="(item, index) in tabList"   
key="index"
size="64"
icon="item.icon"
text="item.text"
activeColor="tabIndex === index ? '#ff557a': ''"
        @click="tabClick(item, index)">
  </u-tabbar-item>
</u-tabbar>

操作步骤：

uview2 u-tabbar 自定义tabbar

预期结果：

无论是否初次点击切换都不要tabbar闪动

实际结果：

只要是全新打开app或h5应用都会至少一次闪动，这种体验非常友不好

bug描述：

发现一个问题，就是自定底部tabbar，无论是app还h5应用在全新第一次打开，首次点击tabbar都会闪动至少一次，之后就不闪了。

更多关于uni-app自定义底部tabbar只要是全新打开app首次点击tabbar都会闪动一两下才正常不闪的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

你好，插件问题，可以去到对应的插件下反馈，这样作者才能看到

更多关于uni-app自定义底部tabbar只要是全新打开app首次点击tabbar都会闪动一两下才正常不闪的实战教程也可以访问 https://www.itying.com/category-93-b0.html


并不是插件问题哦，即使不用uview的组件，就用view来做也是一样的问题

因为是在页面中单独引入的 页面打开时需要加载组件 初次加载需要时间看起来就会有闪动的效果 可以给插件作者反馈一下

不是uview的组件的问题，即使不用就用view+样式来做也是一样的问题

不折腾了，用原生的能满足，体验效果更佳，感谢！

但是用原生的tabbar，一般的组件根本无法遮挡它。我想在页面弹出一个框，让蒙版遮住整个页面时发现就tabbar亮着，看着很奇怪

这是一个常见的自定义tabbar渲染性能问题，主要原因是组件初始化时的渲染延迟和状态同步问题。

问题分析：

  1. 首次加载时，tabbar组件需要完成DOM渲染、样式计算和数据绑定
  2. Vue的数据响应式系统在初次渲染时可能存在短暂的异步更新
  3. u-tabbar组件在初始化时可能经历了多次状态更新

解决方案：

  1. 预加载优化
// 在onLoad中预初始化tabbar状态
onLoad() {
  this.tabIndex = 0 // 明确设置初始值
  this.$nextTick(() => {
    // 确保DOM更新完成
  })
}
  1. 使用v-if控制渲染时机
<u-tabbar
  v-if="tabbarReady"
  value="tabIndex"
  <!-- 其他属性 -->
>
</u-tabbar>

data() {
  return {
    tabbarReady: false
  }
},
onReady() {
  // 在页面完全准备好后再渲染tabbar
  setTimeout(() => {
    this.tabbarReady = true
  }, 50)
}
  1. CSS优化避免布局抖动
.jy-tabbar {
  will-change: transform;
  contain: layout style paint;
}
回到顶部