在微信小程序中我们会经常看到不同字样的顶部标题，这样的样式有的是一样的，而有的却又是不同的导航栏，这是怎么回事呢，在这里我们就探讨一下。(微信小程序json文件不能有注释，复制过去的时候有注释记得自行删除，希望能帮到大家，喜欢的给个赞，感谢)
一、使用微信小程序的默认导航栏
1、在app.json中进行如下配置则能够实现全局的顶栏
"window":{"navigationBarBackgroundColor": "#333",//设置顶栏背景颜色"navigationBarTextStyle": "black",//导航栏标题颜色，仅支持black/white"navigationBarTitleText": "首页测试",//设置顶栏文字"backgroundColor": "#eeeeee",//窗口的背景色"backgroundTextStyle": "light",//下拉 loading 的样式，仅支持 dark / light}
2、而如果想要子页面的顶栏文字不同，则在相应的json文件里添加
{"navigationBarTitleText":"光与影"}
结果截图:
二、使用自定义的导航栏
1、首先需要把默认的导航栏隐藏起来，在app.json文件中设置
"window":{"navigationStyle": "custom"},
2、需要app.js里全局设置获取不同手机的状态栏，注意要先定义一个全局变量navHeight，这样就能把获取到的状态栏高度变成一个全局变量。
//app.jsApp({onLaunch: function () {wx.getSystemInfo({success: res => {//导航高度this.globalData.navHeight = res.statusBarHeight + 46;}, fail(err) {console.log(err);}})},globalData: {userInfo: null,navHeight: 0}})
3、在子页面中拿会拿到全局变量navHeight
const App = getApp();Page({onLoad: function (options) {this.setData({navH: App.globalData.navHeight})},})
4、把拿到的数据显示
<view><view class='nav bg-white' style='height:{{navH}}px'><view class='nav-title'>首页<image src='../../img/back.png' mode='aspectFit' class='back' bindtap='navBack'></image><image src='../../img/home.png' mode='aspectFit' class='back1' bindtap='navBack'></image></view></view><scroll-view class='bg-gray overflow' style='height:calc(100vh - {{navH}}px)' scroll-y><view class='hidden'>我是首页</view></scroll-view></view>
结果截图：
三、把自定义导航栏封装成组件
之前只是简单的实现自定义导航栏，要自定义导航栏，那么一般都会有很多地方用到，每个地方都复制就不是很友好，最好是能够把它封装成一个组件。
1、目录结构如下：
2、把之前的页面照搬过来
<!-- navBar-wxml --><view><view class='nav bg-white' style='height:{{navH}}px'><view class='nav-title'>首页<view wx:if="{{navData.show}}" ><image src='../../img/back.png' mode='aspectFit' class='back' bindtap='navBack'></image> <image src='../../img/home.png' mode='aspectFit' class='back1' bindtap='navBack'></image> </view></view></view></view>
3、Js文件需要做一下修改，之前首页也有返回图标，现在把图标隐藏，去到子页面的时候再显示
const app = getApp();Component({properties: {//类似于vue的props用来进行父子组件之间的传值navData:{ //自定义属性用于服级组件传值过来type: Object,value: ['']}},data: {navH: app.globalData.navHeight //把从全局拿到的手机状态栏高度赋值给页面自定义的高度},methods: {}})
4、主要把子页面的引用展示一下，首页更简单，也是一样，所以就不赘述首页代码了
（1）在json文件引入组件
{"usingComponents": {"navBar": "../../components/navBar"}}
（2）在js文件，定义需要传到子组件的数据
//logs.jsPage({data: {navData: {//传给子组件的数据，用来控制图标的显示show:true}},})
（3）页面显示
<view><navBar navData="{{navData}}" /><scroll-view class='bg-gray overflow' style='height:calc(100vh - {{navH}}px)' scroll-y><view class='hidden'>我是子页面</view></scroll-view></view>
结果截图：
