微信小程序自定义顶部导航栏

微信小程序的顶部导航栏可以通过自定义样式来实现。以下是一种常见的方法：

1. 在 app.json 文件中添加 "navigationStyle" 字段，并将其值设置为 "custom"，例代码如下：

{
  "window": {
    "navigationStyle": "custom"
  }
}

2. 在需要自定义顶部导航栏的页面的 json 文件中，添加 "navigationBarBackgroundColor"、"navigationBarTextStyle" 和 "navigationBarTitleText" 字段，分别用于设置导航栏的背景颜色、文字样式和标题文字，示例代码如下：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "自定义导航栏"
}

3. 在对应页面的 wxml 文件中，使用自定义的导航栏样式，示例代码如下：

<view class="custom-navigation-bar">
  <view class="navigation-bar-title">{{pageTitle}}</view>
</view>

4. 在对应页面的 wxss 文件中，添加自定义导航栏的样式，示例代码如下：

.custom-navigation-bar {
  height: 44px;  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigation-bar-title {
  font-size: 18px;
  color: #000000;
}

通过以上步骤，你可以自定义微信小程序的顶部导航栏样式。你可以根据需要修改背景颜色、文字样式和标题文字等属性。