官网说明

快速直达链接:https://developers.weixin.qq.com/miniprogram/dev/api/wx.showNavigationBarLoading.html

导航配置说明

peizhi.png
peizhi.png

自定义导航栏样式

预览图

tu.png
tu.png

全局配置

App.js

App({
onLaunch: function() {
wx.getSystemInfo({
success: e => {
this.globalData.CustomBar = e.platform == 'android' ? e.statusBarHeight + 50 : e.statusBarHeight + 45;
}
})
},
globalData: {},
})

app.json

"window": {
"navigationStyle": "custom"
}

页面配置

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

index.js

var app = getApp()
Page({
data:{
CustomBar: app.globalData.CustomBar,
}

index.wxml

<image src='/images/7.jpg' class='png' style='width:100%;height:486rpx'></image>

普通导航栏样式

预览图

moren.png
moren.png

注意:删除app.json中的自定义导航栏导航栏样式navigationStyle: custom

index.json

{
"navigationBarBackgroundColor": "#0b8457",
"navigationBarTitleText": "导航标题"
}