uniapp 自定义导航栏

Uniapp 提供了一些内置的导航栏样式，但如果你想自定义导航栏，可以按照以下步骤进行：

1. 在 pages.json 文件中设置导航栏样式，如下所示：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black"
      }
    }
  ]
}

2. 在需要自定义导航栏的页面中，使用 `custom` 样式来替换默认的导航栏样式，如下所示：

<template>
  <view>
    <view class="custom">
      <view class="left">
        <!-- 左侧内容 -->
      </view>
      <view class="center">
        <!-- 中间内容 -->
      </view>
      <view class="right">
        <!-- 右侧内容 -->
      </view>
    </view>
    <view class="content">
      <!-- 页面内容 -->
    </view>
  </view>
</template>

<style>
  .custom {
    height: var(--status-bar-height) + 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: #ffffff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }
  .left, .center, .right {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .left {
    /* 左侧内容样式 */
  }
  .center {
    /* 中间内容样式 */
  }
  .right {
    /* 右侧内容样式 */
  }
  .content {
    /* 页面内容样式 */
    margin-top: var(--status-bar-height) + 44px;
  }
</style>

在上述代码中，我们使用 `--status-bar-height` 变量来获取状态栏高度，然后设置 `.custom` 样式来自定义导航栏的样式。其中，`.left`、`.center`、`.right` 分别代表左侧、中间和右侧的内容，你可以根据实际需要来进行修改。

3. 在页面的 onLoad 方法中，调用 uni.setNavigationBarColor 方法来设置导航栏的背景色、文字颜色等样式，如下所示：

onLoad() {
  uni.setNavigationBarColor({
    backgroundColor: '#ffffff',
    frontColor: '#000000'
  });
}

在上述代码中，我们调用 `uni.setNavigationBarColor` 方法来设置导航栏的背景色为白色，文字颜色为黑色，你也可以根据实际需要来进行修改。

这样，就完成了自定义导航栏的设置。