引入组件

局部引入

// parent.vue
const FNavBar = defineAsyncComponent(() => import('@/components/formaui/f-nav-bar/f-nav-bar.vue'))

基础用法

<f-nav-bar></f-nav-bar>
<view class="h-[100rpx]"></view>
<f-nav-bar is-custom :is-fixed="false">
  <view class="h-full flex justify-center items-center bg-slate-500 rounded-full">搜索</view>
</f-nav-bar>
<f-nav-bar :is-fixed="false"></f-nav-bar>
<f-nav-bar :is-fixed="false"></f-nav-bar>
<f-nav-bar :is-fixed="false"></f-nav-bar>
<f-nav-bar :is-fixed="false"></f-nav-bar>

插槽

名称	说明
default	标签显示内容，按钮内显示内容可自定义

属性

名称	类型	说明	默认值
title	string	导航栏标题	导航栏
titleColor	string	导航栏标题颜色	#0B1D4A
isFixed	boolean	是否固定在顶部	true
isLine	boolean	是否显示分割线	false
backdropFilter	boolean	是否开启高斯模糊效果	false
dropDownHide	boolean	下拉隐藏 NavigationBar，主要针对有回弹效果 ios 端	false
isOpacity	boolean	是否开启背景透明度	true
maxOpacity	number	最大透明度	1
isTransparent	boolean	是否开启透明背景【设置该属性，则背景透明，只出现内容，isOpacity 和 maxOpacity 失效】	false
scrollTop	number	滚动条滚动距离	0
scrollRatio	number	滚动条滚动距离与最大透明度的比例	0.3
bgColor	string	背景颜色，不支持 RGB	#FFFFFF
zIndex	number	导航栏 z-index	8000
isImmersive	boolean	是否沉浸式	true
isCustom	boolean	是否自定义导航栏	false
showBackIcon	boolean	是否显示返回按钮	false
backIconColor	string	返回按钮颜色	#0B1D4A

事件

事件名	说明	回调参数
init	初始化完成事件	{windowWidth: number windowHeight: number headerH: number left: number top: number statusBarHeight: number opacity: number navigationHeight: number menuButtonWidth?: number}
back	返回按钮点击事件	-
change	滚动事件	{ opacity: number }