严重BUG 小米手机安卓11 12下无法正常使用uni-app自定义标题栏

严重BUG 小米手机安卓11 12下无法正常使用uni-app自定义标题栏

操作步骤：

{
  "style": {
    "navigationBarTitleText": "",
    "navigationStyle": "custom",
    "app-plus": {
      "titleNView": false,
      "scrollIndicator": "none",
      "subNVues": [
        {
          "id": "navigation-bar",
          "path": "app-plus/subNvue/navigation-bar/index",
          "type": "navigationBar"
        }
      ]
    }
  }
}

预期结果：

使用自定义标题栏，自带标题栏不展示

实际结果：

自带标题栏展示位空白，整体页面下移。

bug描述：

  • 小米手机安卓11,12均能复现，问题机型不限于小米10，小米 11 Ultra。
  • 小米12s 安卓13正常。vivo手机安卓11也正常。
  • 初步判断是米UI的适配问题。
  • NVUE页面正常，VUE页面有2种情况
    1. 如果是navigate导航，会出现下图中（跳转协议页面）先空白，后续又会顶上去，空白消失正常的情况。
    2. 如果是redirect或者relaunch,空白会一直存在（填写资料页面），并且实际页面会被顶下去，导致底部一部分不可见。

图片

Image 1 Image 2

项目信息

信息 值
产品分类 uniapp/App
PC开发环境 Mac
PC开发环境版本 Macos 15.3 (24D60)
HBuilderX类型 Alpha
HBuilderX版本 4.54
手机系统 Android
手机系统版本 Android 11
手机厂商 小米
手机机型 小米10
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX
App下载地址 https://applink.medlinker.com/download/a.htm

更多关于严重BUG 小米手机安卓11 12下无法正常使用uni-app自定义标题栏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

经过测试，确实只有小米手机安卓12及以下系统会复现，其他品牌手机测试oppo vivo相同系统均是正常的。

更多关于严重BUG 小米手机安卓11 12下无法正常使用uni-app自定义标题栏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


麻烦请提供一个简单的demo示例项目，不要有登录的特殊功能

if (!IS_IOS) { // @ts-ignore last(getCurrentPages())?.$getAppWebview?.()?.setStyle({ bounce: ‘none’ }); }

最后定位到原因实在setup阶段调用这个方法导致的，本来是想全局禁用vue android的bounce效果。

后面放到ready + timeout后，就不会出现了。

底层原因未知。。

回复 BadJser: 所以需要提供demo 我们看下底层什么原因

这个问题确实是小米手机在Android 11/12上特有的适配问题，主要是MIUI系统对自定义标题栏的处理存在兼容性问题。以下是解决方案：

  1. 对于vue页面，可以尝试在onReady生命周期中手动调整页面位置：
onReady() {
  // 针对小米机型做特殊处理
  if(uni.getSystemInfoSync().brand === 'xiaomi') {
    setTimeout(() => {
      const res = uni.getMenuButtonBoundingClientRect()
      uni.pageScrollTo({
        scrollTop: -res.top,
        duration: 0
      })
    }, 300)
  }
}
  1. 或者使用条件编译针对小米机型做特殊样式处理：
/* #ifdef APP-PLUS */
.xiaomi .content {
  padding-top: 0 !important;
  margin-top: -44px !important;
}
/* #endif */
  1. 也可以考虑在manifest.json中针对小米机型关闭自定义标题栏：
"app-plus": {
  "distribute": {
    "android": {
      "uiStyle": "custom",
      "miui": {
        "navigationBar": false
      }
    }
  }
}
回到顶部