微信小程序自定义导航栏样式

修改导航栏为自定义

首先明确一下导航栏样式navigationStyle的属性：
default默认样式
custom自定义样式

打开app.json或者当前页面的json文件，设置navigationStyle导航栏样式为custom， 自定义导航栏，只保留右上角胶囊按钮。

"navigationStyle": "custom",

设置导航样式

在自定义页面的wxml和wxss页面中设置样式，
样式中要注意定位：

position: fixed;
z-index: 1;

固定的距离顶端的距离在下面获取到通知栏高度以后，通过

style="top:{
   
   {BarHeight}}px"

动态绑定，BarHeight的获取如下。

修改通知栏的样式

此时滑动页面时通知栏会被覆盖，
在json文件中设置通知栏字体颜色：

"navigationBarTextStyle": "black"

在wxml页面最上面声明一个空的view，背景颜色设置为白色，宽度设置为100%，
高度通过获取系统通知栏高度动态设定。

<view class="blank" style="height: { 
        { 
        BarHeight}}px;"></view>

.blank{
    
    
  width: 100%;
  background-color: white;
  position: fixed;
  top: 0;
  z-index: 1;
}

通过wx.getSystemInfoAsync方法获取通知栏高度：

data:{
    
    
	BarHeight: '',
}

// 获取通知栏高度
	var that = this;
    wx.getSystemInfoAsync({
    
    
      success(res) {
    
    
        console.log(res.statusBarHeight)
        that.setData({
    
    
          BarHeight: res.statusBarHeight
        })
      }
    })

完整代码

json文件：

"navigationStyle": "custom",
"navigationBarTextStyle": "black"

wxml文件：

	<!-- 空白view -->
	<view class="blank" style="height: { 
        { 
        BarHeight}}px;"></view>
	<!-- 标题 -->
	<view class="title" style="top:{ 
        { 
        BarHeight}}px">
		<view class="titleFont">
			<text>自定义导航栏</text>
		</view>
	</view>

wxss文件：

/* 空白view */
.blank{
    
    
  width: 100%;
  background-color: white;
  position: fixed;
  top: 0;
  z-index: 1;
}
/* 标题 */
.title {
    
    
  height: 55px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0); 
  z-index: 2;
  position: fixed;
}

.titleFont {
    
    
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
}

js文件：

data:{
    
    
	BarHeight: '',
}

onLoad() {
    
    
    var that = this;
    // 获取通知栏高度
    wx.getSystemInfoAsync({
    
    
      success(res) {
    
    
        console.log(res.statusBarHeight)
        that.setData({
    
    
          BarHeight: res.statusBarHeight
        })
      }
    })
 }