微信小程序之导航栏样式修改、自定义导航栏及封装

 

在微信小程序中我们会经常看到不同字样的顶部标题，这样的样式有的是一样的，而有的却又是不同的导航栏，这是怎么回事呢，在这里我们就探讨一下。(微信小程序json文件不能有注释，复制过去的时候有注释记得自行删除，希望能帮到大家，喜欢的给个赞，感谢)

一、使用微信小程序的默认导航栏

1、在app.json中进行如下配置则能够实现全局的顶栏

"window":{
  "navigationBarBackgroundColor": "#333",//设置顶栏背景颜色
  "navigationBarTextStyle": "black",//导航栏标题颜色，仅支持 black / white
  "navigationBarTitleText": "首页测试",//设置顶栏文字
  "backgroundColor": "#eeeeee",//窗口的背景色
  "backgroundTextStyle": "light",//下拉 loading 的样式，仅支持 dark / light
}

 2、而如果想要子页面的顶栏文字不同，则在相应的json文件里添加

{
    "navigationBarTitleText": "光与影"
}

结果截图: