Navbar 自定义导航栏

该组件一般用于特殊场景情况下，需要自定义导航栏的时候用到，一般建议使用 uni-app 带的导航栏。

平台差异说明

APP	H5	微信小程序	支付宝小程序	···
√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

该组件的高度是根据系统状态栏搞定自动计算的，如果需要自定义高度，可以设置 height 属性。

• 默认高度为44px，和 uni-app 导航栏高度一致， 此高度为导航栏内容高度，不包含状态栏的高度，组件内部会自动加上状态栏的高度，并填充装提了的占位区域。
• 左侧返回区域、右侧区域的宽度为 60px ，可以通过 leftWidth 和 rightWidth 属性设置，建议 leftWidth 和 rightWidth 设置一致，以保证视觉效果。

<template>
    <view>
        <fu-navbar leftIcon="left" title="FusionsUI"></fu-navbar>
    </view>
</template>

自定义导航栏内容

通过自定义 slot 传入内容

<template>
    <fu-navbar>
        <template v-slot:left>
            <view>左侧区域</view>
        </template>
        <template v-slot:title>
            <view>标题区域</view>
        </template>
        <template v-slot:right>
            <view>右侧区域</view>
        </template>
    </fu-navbar>
</template>

自定义导航栏背景颜色

通过 bgColor 属性设置导航栏背景颜色

<template>
    <fu-navbar title="" bgColor="#ffffff"></fu-navbar>
</template>

API

Navbar Props

属性名	说明	类型	默认值	可选值
dark	开启黑暗模式	Boolean	false	true
title	标题	String	-	-
leftIcon	左侧图标	String	left	-
leftText	左侧文案	String	-	-
rightIcon	右侧图标	String	-	-
rightText	右侧文案	String	-	-
color	图标和文字颜色	String	-	-
bgColor	导航栏背景颜色	String	-	-
fixed	是否固定在顶部	Boolean	false	true
statusBar	是否显示状态栏	Boolean	true	false
shadow	是否显示阴影	Boolean	false	true
border	是否显示下边框	Boolean	true	false
stat	是否开启统计标题上报	Boolean	false	true
height	导航栏高度	String｜Number	44	-
leftWidth	左侧区域宽度	String｜Number	60	-
rightWidth	右侧区域宽度	String｜Number	60	-
paddingTitle	导航栏左右内间距	String	10	-

Navbar Events

事件名	说明	回调参数
clickLeft	左侧按钮点击时触发	() => void
clickRight	右侧按钮点击时触发	() => void
clickTitle	标题区域点击时触发	() => void

Navbar Slots

插槽名	说明
default	标题
left	左侧区域
right	右侧区域