uniapp小程序自定义导航栏兼容

原创已于 2023-03-31 16:28:02 修改 · 371 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端框架

于 2023-03-31 16:22:33 首次发布

原理：

第一步获取系统信息

const systemInfo = wx.getSystemInfoSync();

第二步计算胶囊按钮位置

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
const navBarInfo = {
  statusBarHeight: systemInfo.statusBarHeight,
  top: menuButtonInfo.top,
  height: menuButtonInfo.height,
  paddingTop:
    menuButtonInfo.top +
    menuButtonInfo.height +
    menuButtonInfo.top -
    systemInfo.statusBarHeight,
  windowHeight: systemInfo.windowHeight,
};

第三步设置导航栏高度

<template>
  <view class="customNav" :style="styleClass">
    <slot></slot>
  </view>
</template>

const app = getApp()
const navBarInfo = app.globalData.navBarInfo
console.log("navBarInfo======>",navBarInfo)
state.styleClass = {
  paddingTop:navBarInfo.statusBarHeight + 'px',
  height:(navBarInfo.top-navBarInfo.statusBarHeight)*2+navBarInfo.height + 'px'
}