uni-app APP端小米10手机 底部tabbar首页跟我的位置突然颠倒

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app APP端小米10手机 底部tabbar首页跟我的位置突然颠倒

操作步骤：

  • 使用小米10下载

预期结果：

  • 底部导航顺序应该是 ：首页、消息、义卖、我的

实际结果：

  • 现在实际的底部导航顺序是：我的、消息、义卖、首页

bug描述：

APP端小米10 手机 底部tabbar首页跟我的 突然位置颠倒了。经客户反馈说是之前是正常的，国庆节前才变成这样的。代码底部tabbar用的uniapp自带的

产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式 项目创建方式
uniapp/App Windows 22631.4169 正式 4.29 Android Android 5.0 小米 小米10 vue vue2 云端 HBuilderX

https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20241010/ba8a73b0b5c82e7794e778c3f9631aba.png https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20241010/8b5bafe0c6a32619871286c7c6427010.jpg https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20241010/7083e2329e3b56505e4e1c06ad4fb843.png

App下载地址或H5⽹址


Harmonyos Next教程
5 回复

有更改tabbar什么的操作么？ 你搞个官方demo在那手机上试试，看有问题不


感觉就那个手机的flex默认flex-direction: row-reverse。。普通的tabbar是没有设置这个，使用的默认flex-direction: row的。。你看看官方demo打包出来之后查看是不是翻转了的

等等，我看你手机系统设置截图是翻转了的呢，，全部靠右的。。应该是你手机的设置问题

回复 靐齉齾麤龖龗: 我说我咋看着客户的手机这么别扭了，一语惊醒梦中人

针对你提到的问题，uni-app在小米10手机上底部tabbar的首页和“我的”位置颠倒，这通常可能是由于样式、配置或者设备适配的问题引起的。在uni-app中，底部tabbar的配置通常在pages.json文件中进行。为了确保底部tabbar在不同设备上显示正常，我们可以检查以下几个方面：

  1. 确认pages.json配置： 首先，确保pages.json中关于tabbar的配置是正确的。例如：

    {
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/tabbar/mine.png",
        "selectedIconPath": "static/tabbar/mine-active.png"
      }
    ]
  }
}

    确保list数组中的顺序与期望的显示顺序一致。

  2. 检查CSS样式： 虽然tabbar的配置主要在pages.json中，但也要检查相关页面的CSS样式，确保没有影响到tabbar的布局。特别是针对小米10这类特定设备的样式适配。

  3. 设备特性检查： 考虑到小米10可能使用的Android版本或屏幕特性（如刘海屏、全面屏等），可能需要额外的适配。可以在manifest.json中配置app-plus的相关属性，确保应用能够正确识别和处理这些设备特性。

  4. 动态调整： 如果上述静态配置无法解决问题，可以考虑在App启动时，根据设备信息动态调整tabbar的顺序。这通常涉及到使用uni-app提供的API获取设备信息，并根据这些信息调整tabbar配置。

  5. 测试与调试： 在不同设备和模拟器上测试应用，确保tabbar在所有目标设备上都能正确显示。

如果以上方法仍然无法解决问题，建议详细检查是否有其他代码或配置影响到tabbar的显示，或者考虑是否有必要向uni-app社区或开发者支持寻求更专业的帮助。

回到顶部