设置导航栏为自定义

• "navigationStyle": "custom"
  

{

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black",
    "navigationStyle": "custom"
  },

}

• index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    statusHeight: 0,
    menuTop: 0,
    menuHeight: 0
  },
  onLoad() {
    // 获取状态栏的高度
   wx.getSystemInfo({
      success: (result) => {
        console.log(result)
        this.setData({
          statusHeight: result.statusBarHeight
        })
      },
    })
    // 获取胶囊的高度和top值
    let menu = wx.getMenuButtonBoundingClientRect()
    let menuTop = menu.top - this.data.statusHeight;
    this.setData({
      menuTop: menuTop,
      menuHeight: menu.height
    })
  },

})

• index.wxml

<view class="status-bar1" style="{height: {{statusBarHeight + 'px'}}'}">
 {{statusHeight}}
</view>
<view class="menu" style="height: {{menuHeight + 'px'}};margin-top: {{menuTop +'px'}}">
 首页
</view>

• index.wxss

.status-bar1 {
  background-color: #ff6600;
}
.menu {
  background-color: #00f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

在这里插入图片描述