uni-app midButton配置过程正常 点击监听时底部tabbar和上一个tab内容会短暂出现2s后消失 参考附件视频

uni-app midButton配置过程正常 点击监听时底部tabbar和上一个tab内容会短暂出现2s后消失 参考附件视频

示例代码：

onLaunch: function() {
uni.onTabBarMidButtonTap(() =>{
BeforeNavigateTo({
url: '/pages/native/report',
}, true)  //简单二次封装，用作判断是否登录，没别的作用
})
console.log('App Launch')
},

操作步骤：

进入首页，点击中间自定义tab,采用的官方midButton配置，

预期结果：

不应该出现底部tabbar，和前一个tab页面的内容，虽然过会消失，

实际结果：

出现底部tabbar，和前一个tab页面的内容

bug描述：

定位tabbar中间凸起的效果，在onLaunch 周期里面监听中间tab 点击事件uni.onTabBarMidButtonTap，每次跳转时候，新打开页面会闪一下，页面会出现前一个tab页的内容，包括底部的tabber，然后就恢复正常了，代码很少，就正常逻辑，这应该是一个框架bug，

开发环境 版本号 项目创建方式
Windows win10家庭中文版 HBuilderX
手机系统 手机系统版本号 手机厂商
---------- -------------- --------------
Android Android 10 华为

7eea383233fb7ca5c061a819a8e4d8e4.zip


更多关于uni-app midButton配置过程正常 点击监听时底部tabbar和上一个tab内容会短暂出现2s后消失 参考附件视频的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

看视频猜测应该是Android平台阴影(box-shadow)问题，去掉项目中的box-shadow试下。 链接 https://uniapp.dcloud.io/use-weex?id=android平台阴影box-shadow问题

更多关于uni-app midButton配置过程正常 点击监听时底部tabbar和上一个tab内容会短暂出现2s后消失 参考附件视频的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好像是的，谢了，文档还是看的不仔细，没注意到这里，谢谢啦，我自己估计半天搞不定

安卓模拟器没出现该bug

问题已解决，https://uniapp.dcloud.io/use-weex?id=android平台阴影box-shadow问题 box-shadow设置问题，大家还是避开这类，官方回复很及时，非常感谢

这个问题是 uni-app 在 Android 平台上的一个已知渲染时序问题。当通过 uni.onTabBarMidButtonTap 监听中间按钮点击并跳转页面时，系统会先显示上一个 tab 页的内容和底部 tabbar，然后才执行页面跳转逻辑。

解决方案：

  1. 使用页面隐藏替代应用级监听 在当前活动的 tab 页面的 onShow 或 onLoad 生命周期中监听：
// 在需要监听的页面中
onShow() {
  uni.onTabBarMidButtonTap(() => {
    this.BeforeNavigateTo({
      url: '/pages/native/report'
    }, true)
  })
},
onHide() {
  // 移除监听避免重复
  uni.offTabBarMidButtonTap()
}
  1. 添加过渡效果掩盖闪屏 在目标页面添加简单的入场动画：
// 在 /pages/native/report 页面的 onLoad 中
onLoad() {
  // 强制重新渲染，避免看到上一个页面
  this.$nextTick(() => {
    // 可以添加淡入效果
  })
}
  1. 使用条件渲染 在目标页面使用 v-if 控制内容显示时机：
<template>
  <view v-if="pageReady">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageReady: false
    }
  },
  onReady() {
    this.pageReady = true
  }
}
</script>
回到顶部