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

微信小程序中可以通过自定义导航栏实现更加个性化的界面设计。以下是一个简单的实现步骤：

1. 在 app.json 文件中设置 "navigationStyle": "custom"，表示使用自定义导航栏。
2. 在页面的 WXML 文件中编写自定义导航栏的 HTML 代码，例如：

<view class="navbar">
  <view class="navbar-title">自定义导航栏</view>
</view>

其中，navbar 表示导航栏的样式，navbar-title 表示标题的样式，可以根据需要进行自定义。
3. 在页面的 wxss 文件中设置导航栏的样式，例如：

.navbar {
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

其中，height 表示导航栏的高度，background-color 表示导航栏的背景颜色，border-bottom 表示导航栏底部的边框线，display、align-items 和 justify-content 表示导航栏标题的布局方式，navbar-title 表示标题的样式，可以根据需要进行自定义。
4. 在页面的 JS 文件中设置导航栏的返回按钮，例如：

wx.showModal({
  title: '提示',
  content: '确认返回上一页？',
  success: function (res) {
    if (res.confirm) {
      wx.navigateBack({
        delta: 1
      })
    }
  }
})

其中，wx.showModal 表示显示一个模态框，title 表示模态框的标题，content 表示模态框的内容，success 表示点击确定按钮后执行的回调函数，wx.navigateBack 表示返回上一页。

通过以上步骤，就可以实现微信小程序的自定义导航栏。