今天来聊一聊微信小程序导航如何自定义，微信小程序开发者文档提供了navigationStyle，在app.json里面添加。

app.json

"window": {
           "backgroundTextStyle" : "#000"             //下拉背景字体，loading图的样式
           "navigationBarBackgroundColor" : "red"    //导航标题背景色                
           "navigationBarTitleText": "标题",         //导航标题内容
           "navigationBarTextStyle": "#fff"         //导航标题字体颜色
           "navigationStyle": "custom" //自定义导航   default默认样式
  },

因为微信小程序不支持单个页面设置，一旦在要决定使用自定义导航栏，那么每个页面都需要设置，所有单独新建一个组件，用于存放导航栏。

image.png

组件代码如下图：

<view class='nav' style="height:{{customBar}}px">
  <view class='con' style="height:{{customBar}}px;padding-top:{{statusBar}}px;">
    <view class="backBtn"  catchtap="details">
       <image src='../../image/login.png' mode='aspectFill' class='back-home'></image>
    </view>
    <view class="title" style="top:{{statusBar}}px">首页</view>
  </view>
</view>

js部分：

const app = getApp();
Page({
  data: {
    statusBar: app.globalData.statusBar,
    customBar: app.globalData.customBar,
    custom: app.globalData.custom
  },
  goBack() {
    wx.navigateBack({
      delta: 1
    });
  },
  details: function () {
    wx.navigateTo({
      url: '/pages/map/map' //头部按钮点击跳转页面
    })
  },
})

在需要的页面中，引入该组件。

<!-- 引入头部自定义组件 -->
<nav-bar navbar-data="{{nvabarData}}"></nav-bar>

完美解决齐刘海适配问题。

image.png