微信小程序自定义顶部导航栏（适配各种机型）

效果图

1.pages.js，需要自定义导航栏的页面设置"navigationStyle": "custom"

2.App.vue,获取设备高度及胶囊位置

  onLaunch: function () {// 系统信息const systemInfo = uni.getSystemInfoSync()// 胶囊按钮位置信息const menuButtonInfo = uni.getMenuButtonBoundingClientRect()this.globalData.navBarInfo = {statusBarHeight: systemInfo.statusBarHeight,top: menuButtonInfo.top,height: menuButtonInfo.height,paddingTop: menuButtonInfo.top + menuButtonInfo.height + menuButtonInfo.top - systemInfo.statusBarHeight,windowHeight: systemInfo.windowHeight};},

3.在需要的地方设置导航栏高度

<template><view class="customNav" :style="{ ...styleClass, opacity: opacity, backgroundColor: bgcolorString }"><slot></slot></view>
</template>

    const state = reactive({styleClass: {paddingTop: '60px',height: '32px',}})onShow(() => {const navBarInfo = getApp().globalData.navBarInfostate.styleClass = {paddingTop: navBarInfo.statusBarHeight + 'px',height: (navBarInfo.top - navBarInfo.statusBarHeight) * 2 + navBarInfo.height + 'px',}})