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

前端（从入门到入土）2024-11-15 10:26

效果图

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

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

javascript 复制代码

  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.在需要的地方设置导航栏高度

html 复制代码

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

javascript 复制代码

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