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

aliAjax

已于 2023-03-31 16:28:02 修改

阅读量242

点赞数

文章标签： javascript 前端框架

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

本文链接：https://blog.csdn.net/aliAjax/article/details/129883089

版权

原理：

第一步获取系统信息

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'
}