微信小程序自定义导航栏

一下代码是改变导航栏样式的代码：

第一种方法比较常规，只能改改导航栏字体颜色和背景颜色

//wxml
<page-meta>
  <navigation-bar
    title="标题"
    front-color="#000000"
    background-color="#ffffff"
  />
</page-meta>

第二种方法就相对比较美观了

设置消除默认导航栏

  //app.json
  "window":{
	"navigationStyle":"custom"
}

效果如图

这时候就可以自由发挥啦，可以自己制作一个导航栏了；
通过在页面顶端建一个view，然后z-index设置大一点就好了；

附带获取导航栏的高度以及调用

  //app.js
  globalData: {
    barHeight:wx.getSystemInfoSync()['statusBarHeight']
  }

const app=getApp();
Page({
	data:{
	  BarHeight:app.globalData.barHeight
	}
})