hbuilder微信小程序自定义头部导航栏navigationStyle

打开pages.json文件

输入"navigationStyle": "custom"代码

{
  "pages": [{
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "首页"
      "navigationStyle": "custom"
      }
    }
  ]
}

打开index.vue文件

1、在template标签里输入以下代码：

<view class="custom-navbar" :style="{ 
  height: navBarHeight + 'px', 
  paddingTop: statusBarHeight + 'px' 
}">
  <img src="../../static/images/rili.png" @click="open" class="nav-icon" />
  <view class="nav-title">ལོ་ཐོ་</view>
</view>

2、在script标签里输入以下代码：

export default {
  data() {
    return {
      navBarHeight: 0,
      statusBarHeight: 0
    }
  },
  onLoad() {
    this.calcNavBarHeight(); 
  },
  methods: {
    calcNavBarHeight(){
      const systemInfo = wx.getSystemInfoSync();
      const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
      const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
      const menuButtonHeight = menuButtonInfo.height;     // 胶囊按钮高度
      const menuButtonTop = menuButtonInfo.top;           // 胶囊按钮顶部距离
      const navBarHeight = (menuButtonTop - statusBarHeight) * 2 + menuButtonHeight + statusBarHeight;
      this.navBarHeight = navBarHeight - 15
      this.statusBarHeight = statusBarHeight + 2
    }
  }
}

3、在style lang="scss"标签里输入以下代码：

.custom-navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background-color: #fff; 
  z-index: 999;
  display: flex;
  align-items: center;
  padding-top: var(--status-bar-height); 
  z-index: 99999;
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    color: #000000;
    font-weight: 500;
  }
  img{
      position: absolute;
      left: 10px;
      width: 20px;
      height: 20px;
      background-size: 100%;
  }
}