小程序自定义导航栏（2.23号问题更新）

2022.2.23更新 start
在使用该组件的过程中，顶部失效的问题再度出现，经过多次调式，居然又是同步异步的问题！！！ wx.getSystemInfo()，wx.getSystemInfoSync()，应该使用同步的wx.getSystemInfoSync()这样可以保证下面的数据按顺序获取到值，而不会先先行一步导致undefined。
了解同步异步可以直接进大神文章看看，微信小程序之同步与异步API

更新的组件 myTop.js

"use strict";
import {
  empty
} from '../../utils/util'//用来过滤对象是否为空,没有该文件则删掉，否则会报错
/**
 * @navigationStyle 整体导航栏样式
 * 
 */
Component({
 pageLifetimes: {
  
 },
 options: {
  multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
 attached() {
  const SystemInfo = wx.getSystemInfoSync();
  const MenuInfo = wx.getMenuButtonBoundingClientRect();

  //const CustomBar =  MenuInfo.bottom +  MenuInfo.top - SystemInfo.statusBarHeight;
  const navHeight =  MenuInfo.height + MenuInfo.top*2
  const statusBarHeight = SystemInfo.statusBarHeight
  console.log(statusBarHeight);
  //没有自定义empty()函数的可以把判断直接去掉
  if(!empty(SystemInfo)){
    console.error('SystemInfo')
  }else if(!empty(MenuInfo)){
    console.error('MenuInfo')
  }else if(!empty(CustomBar)){
    console.error('CustomBar')
  }
  console.error();
  this.setData({
   //CustomBar,
   MenuInfo,
   SystemInfo,
   navHeight,
   statusBarHeight
  })
 },
 ready() {
  
 },

 properties:{
  navigationStyle:{
   type:String,
   value:'',
  },
 },
 data: {
  
 },
 methods: {

 }
});

util.js

/**
 * 验证非空对象
 * @param object 
 */
function empty(object){
  if(object === undefined || object === null || object === '' || object === 0 || !object){
    return false;
  }else{
    return true;
  }
}

2022.2.23更新 end

思路：定义一个自定义导航栏组件，在其他页面引用该组件（放到分包，小程序内容较多在app.js里面的globalData数据会出现失效，导致自定义导航栏失效）

组件主要内容
myTop.wxml

<!--components/myTop/myTop.wxml-->
 <view>
   <view style="height: {{statusBarHeight}}px;"></view>
   <view style="height: {{navHeight}}px; line-height: {{navHeight}}px;" class="navigationBarTitle" :style="{{navigationBarTitleStyle}}">
   <!-- 导航栏主栏 -->
    <slot name="myTopContentView"/>
  </view>
 </view>

myTop.js

"use strict";
/**
 * @navigationStyle 整体导航栏样式
 * 
 */
const app = getApp()
Component({
  pageLifetimes: {

  },
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  attached() {
  const SystemInfo = wx.getSystemInfoSync();
  const MenuInfo = wx.getMenuButtonBoundingClientRect();
  const CustomBar =  MenuInfo.bottom +  MenuInfo.top - SystemInfo.statusBarHeight;
  const statusBarHeight = SystemInfo.statusBarHeight
  // const navHeight =  MenuInfo.height + MenuInfo.top*2
  const navHeight = (MenuInfo.top-statusBarHeight+2)*2 + MenuInfo.height

  console.log(statusBarHeight);
  if(!empty(SystemInfo)){
    console.error('SystemInfo')
  }else if(!empty(MenuInfo)){
    console.error('MenuInfo')
  }else if(!empty(CustomBar)){
    console.error('CustomBar')
  }
  console.error();
  this.setData({
   CustomBar,
   MenuInfo,
   SystemInfo,
   navHeight,
   statusBarHeight
  })

 },
  ready() {

  },
  properties: {
    navigationStyle: {
      type: String,
      value: '',
    },
  },
  data: {

  },
  methods: {

  }
});

页面引用
myCard.json

{
  "usingComponents": {
    "van-sticky": "@vant/weapp/sticky/index",
    "myTop": "/components/myTop/myTop"
  },
  "navigationStyle": "custom"
}

myCard.wxml

<myTop>
    <view class="top_nav" slot="myTopContentView" >
        <text class="nav-back cuIcon-back text-white" bindtap="goback"></text>
        <text class="nav_name">我的名片</text>
    </view>
</myTop>

效果展示：