ui-navtop 顶部导航占位组件

版本：v2.3.11

顶部导航占位组件，自动获取系统状态栏和导航栏高度，生成等高占位区域，用于自定义导航栏场景下的页面顶部留白

基本使用

<template>
  <view class="navtop-demo">
    <ui-navtop>
      <view class="custom-nav">自定义导航栏内容</view>
    </ui-navtop>
    <view class="page-content">页面内容</view>
  </view>
</template>

<style scoped>
.custom-nav {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 44px;
}
.page-content {
  padding: 20px;
}
</style>

Props

参数	类型	默认值	说明
bgColor	String	'transparent'	背景颜色

Slots

名称	说明
default	导航栏内容区域，放置在状态栏下方的导航区域中

示例

带背景色的导航占位

<template>
  <view>
    <ui-navtop bgColor="#409EFF">
      <view class="custom-nav">蓝色导航栏</view>
    </ui-navtop>
    <view class="page-content">页面内容</view>
  </view>
</template>

透明背景占位

<template>
  <view>
    <ui-navtop>
      <view class="custom-nav">透明背景导航栏</view>
    </ui-navtop>
    <view class="page-content">页面内容</view>
  </view>
</template>

平台兼容

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ小程序	✅
APP	✅

注意事项

1. 组件会自动获取系统状态栏高度和导航栏高度
2. 适用于自定义导航栏场景，配合 ui-headbox 组件使用效果更佳
3. bgColor 默认为透明，如需设置背景色请手动指定