今天来聊一聊微信小程序导航如何自定义，微信小程序开发者文档提供了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
