Taro微信小程序，自定义TabBar在开发者工具中能显示，但真机调试不显示

问题背景

Taro开发小程序，自定义TabBar, 在app.config.ts中，已配置好：

tabBar: {
    custom: true,
}

并自定义了custom-tab-bar文件夹，配置好了自定义的tabbar，在微信开发者工具中，正常显示

但是在真机调试中一片空白，检查wxml，元素存在，并且高度宽度正常，位置正常，只是被遮挡，添加z-index: 9999不生效，
最后发现是cover-view组件影响了层级，将cover-view组件改为view之后真机正常显示。
但大家如果遇到类似的问题，可能需要做以下排查：

• 路径和配置：确认文件位置及 app.json 配置是否正确。
• 资源引用：检查样式和图片路径是否正确。
• 样式设置：确保样式文件中没有隐藏 custom-tab-bar 的规则。
• 逻辑代码：确保 this.getTabBar().setData() 的调用逻辑正确。
• 环境版本：升级开发者工具和真机微信客户端。

如果还是有隐藏的问题：
例如：z-index: 9999 设置不起作用，通常是由于层级问题或父容器的布局特性限制了元素的显示层级。
以下是可能的原因及对应的解决方案：
1. custom-tab-bar 的层级受父级容器限制
原因：custom-tab-bar 所在的父级容器可能设置了 overflow: hidden 或者没有明确的层级关系，导致子元素的 z-index 无法生效。
解决方案：
检查 custom-tab-bar 的父级容器，确保没有overflow: hidden或类似样式。
修改 custom-tab-bar 的 position 为 fixed，使其脱离文档流：

.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  z-index: 9999;
}

2. 小程序页面的 cover-view 或其他组件影响层级
原因：在小程序中，cover-view、video等组件的层级默认会高于普通的 view 元素。
解决方案：
如果使用了cover-view，尝试调整布局避免它与 custom-tab-bar重叠。
确保 custom-tab-bar 没有被其他组件（如 cover-view 或 map）覆盖。
可以用 wx.createSelectorQuery() 确定实际布局层级问题。
3. 页面的 scroll-view 或其他元素遮挡
原因：如果页面中使用了 scroll-view，并且 scroll-view 的样式未正确设置，可能会遮挡 custom-tab-bar。
解决方案：
设置 scroll-view 的样式，避免影响 custom-tab-bar 的显示：

.scroll-view {
  margin-bottom: 50px; /* 根据 custom-tab-bar 的高度调整 */
}

4. 基础库版本问题
原因：部分层级行为可能与基础库版本有关。
解决方案：
检查小程序基础库版本是否是最新的，并确保你的代码与目标版本兼容。
在 app.json 中指定基础库最低版本，例如：

{
  "miniprogramRoot": "./",
  "compileType": "miniprogram",
  "setting": {
    "es6": true,
    "minify": true
  },
  "requiredBackgroundModes": ["audio"],
  "navigateToMiniProgramAppIdList": [],
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "tabBar": {
    "custom": true
  },
  "permission": {},
  "condition": {}
}

5. 优先级问题
原因：在 CSS 中，z-index 的优先级可能被其他样式规则覆盖。
解决方案：
使用更高优先级的选择器，确保样式生效：

page .custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 9999;
}

6. 调试方式
使用 wx.createSelectorQuery() 检查 custom-tab-bar 的实际位置和层级：

const query = wx.createSelectorQuery();
query.select('.custom-tab-bar').boundingClientRect((rect) => {
  console.log(rect);
}).exec();

检查元素是否正确显示并处于可视区域。