微信小程序 自定义公共导航栏

微信小程序自定义头部导航栏需要在app.js文件中添加 “navigationStyle”: "custom"

 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom" //自定义导航   default默认样式
  },

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

组件代码如下图：

<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>

完美解决齐刘海适配问题

参考一位大神的文章：https://blog.csdn.net/qq_39106854/article/details/89030903