小程序自定义导航栏

1.设置 “navigationStyle”:“custom”,

{
                    "path" : "business_circle/business_circle",
                    "style" : {
                        "navigationStyle":"custom",
                        "app-plus" : {
                            "bounce" : "none" // 取消iOS回弹,避免和下拉刷新冲突 (小程序无法取消, 点此查看H5端的                      取消方法... )
                            "titleNView": false   
                        }
                    }
                },

获取到导航栏的高度

onst {
        statusBarHeight,   //获取状态栏的高度
        platform           //获取客户端平台
      } = wx.getSystemInfoSync()
 const {
        top,     //按钮胶囊距离顶部的高度
        height   //获取胶囊按钮的高度
      } = wx.getMenuButtonBoundingClientRect()
 // 状态栏高度
      wx.setStorageSync('statusBarHeight', statusBarHeight)
      // 胶囊按钮高度 一般是32 如果获取不到就使用32
      wx.setStorageSync('menuButtonHeight', height ? height : 32)

 // 判断胶囊按钮信息是否成功获取
      if (top && top !== 0 && height && height !== 0) {
        const navigationBarHeight = (top - statusBarHeight) * 2 + height
        // 导航栏高度
        wx.setStorageSync('navigationBarHeight', navigationBarHeight)
      } else {
        wx.setStorageSync(
          'navigationBarHeight',
          platform === 'android' ? 48 : 40
        )
      }

在页面获取高度

data(){
     return{
       // 状态栏高度
          statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
          // 导航栏高度
          navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
          // 胶囊按钮高度
          menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
          // 导航栏和状态栏高度
          navigationBarAndStatusBarHeight:
            wx.getStorageSync('statusBarHeight') +
            wx.getStorageSync('navigationBarHeight') +
            'px'
     }
    },

使用高度

<template>
    <view >
      <view class="navigation-container" :style="{'height':  navigationBarAndStatusBarHeight}">
        <!--空白来占位状态栏-->
        <view :style="{'height': statusBarHeight}"></view>
        <!--自定义导航栏-->
        <view class="navigation-bar" :style="{'height': navigationBarHeight}">
          <view class="navigation-buttons" :style="{'height': menuButtonHeight}" @click="pagegoback">
            <image class="nav-img" src='../static/img/goback.png'/>
          </view>
          <view class="navigation-title" :style="{'height': navigationBarHeight}">{{name}}</view>
        </view>
      </view>
      <!--空白占位fixed空出的位置-->
      <view :style="{'height':navigationBarAndStatusBarHeight}" style=" background: #ffffff"></view>
    </view>
</template>

样式

.navigation-container {
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: #ffffff;
}
.navigation-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.navigation-buttons {
  display: flex;
  align-items: center;
  margin-left: 10px;
  box-sizing: border-box;
  background-color: transparent;
}
.nav-img{
  height: 32rpx;
  width: 32rpx;
}
.navigation-title {
  position: absolute;
  left: 104px;
  right: 104px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}