uni-app uni-nav-bar 自定义导航栏高度无效

这个就是demo

在 uni-app 中使用 uni-nav-bar 组件时，如果自定义导航栏高度无效，可能是由于以下几个原因导致的。下面是一些可能的原因及解决方法：

1. 样式未生效

• 确保你设置的样式能够正确应用到 uni-nav-bar 组件上。可以通过 class 或 style 属性来设置自定义高度。
• 例如：

  <uni-nav-bar class="custom-nav-bar" title="自定义导航栏"></uni-nav-bar>
  
  <style>
  .custom-nav-bar {
      height: 100px; /* 自定义高度 */
  }
  </style>

2. 样式作用域问题

• 如果你在 style 标签中使用了 scoped，可能会导致样式无法正确应用到组件上。你可以尝试去掉 scoped，或者使用全局样式。
• 例如：

  <style scoped>
  /* 这里可能无法生效 */
  .custom-nav-bar {
      height: 100px;
  }
  </style>
  
  <style>
  /* 全局样式 */
  .custom-nav-bar {
      height: 100px;
  }
  </style>

3. 组件内部限制

• uni-nav-bar 组件可能内部有一些默认的样式或高度限制。如果通过外部样式无法覆盖，可以尝试通过 deep 选择器来强制覆盖内部样式。
• 例如：

  <style scoped>
  /deep/ .uni-nav-bar {
      height: 100px !important;
  }
  </style>

4. 平台差异

• 不同的平台（如微信小程序、H5、App）可能会有不同的默认样式或限制。你可以根据平台进行条件编译，设置不同的样式。
• 例如：

  <style>
  /* 通用样式 */
  .custom-nav-bar {
      height: 60px;
  }
  
  /* H5 平台 */
  #ifdef H5
  .custom-nav-bar {
      height: 80px;
  }
  #endif
  
  /* 微信小程序 */
  #ifdef MP-WEIXIN
  .custom-nav-bar {
      height: 100px;
  }
  #endif
  </style>

5. 使用 uni.setNavigationBarTitle

• 如果你只是需要修改导航栏的标题或其他属性，而不是高度，可以使用 uni.setNavigationBarTitle 等 API 来动态设置导航栏的属性。

6. 检查父容器限制

• 确保 uni-nav-bar 的父容器没有限制其高度的样式，比如 overflow: hidden 或 flex 布局等。

7. 使用 uni-nav-bar 的 height 属性

• 如果 uni-nav-bar 提供了 height 属性，可以直接通过属性设置高度，而不是通过 CSS。

示例代码：

<template>
  <view>
    <uni-nav-bar class="custom-nav-bar" title="自定义导航栏"></uni-nav-bar>
  </view>
</template>

<style>
.custom-nav-bar {
    height: 100px; /* 自定义高度 */
    background-color: #f0f0f0; /* 自定义背景色 */
}
</style>