Navbar 自定义导航栏

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

平台兼容性

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

基本使用

默认情况下，该组件只有向左的箭头，点击可以返回上一页，如果您不想使用左边的内容可以通过 showLeft 为 false 来手动隐藏。

如果想在返回箭头的右边自定义类似"返回"字样，可以将 left-text 设置为"返回"
通过 title 参数传入需要显示的标题，通过 title-width (rpx)设置标题区域的宽度，文字超出会通过省略号隐藏
通过 fixed 配置是否将导航栏固定在顶部

说明

在小程序中，导航栏会通过 mpRightReserveCapsule(默认为true) 属性来预留导航栏右侧的胶囊位置，避开该区域。
组件底部默认有一条下边框，如您不需要，可以设置border为false即可

vue

<template>
	<view>
		<!-- 支持autoBack，默认为false -->
        <wu-navbar
            title="个人中心"
            @rightClick="rightClick"
            :autoBack="true"
        >
        </wu-navbar>
	</view>
</template>

<script>
    methods:{
        rightClick() {
            console.log('rightClick');
        },
        leftClick() {
            console.log('leftClick');
        }
    }
</script>

<template>
	<view>
		<!-- 支持autoBack，默认为false -->
        <wu-navbar
            title="个人中心"
            @rightClick="rightClick"
            :autoBack="true"
        >
        </wu-navbar>
	</view>
</template>

<script>
    methods:{
        rightClick() {
            console.log('rightClick');
        },
        leftClick() {
            console.log('leftClick');
        }
    }
</script>

注意事项

既然是要自定义导航栏，那么首先就要取消系统自带的导航栏，需要在uni-app目的根目录的"pages.json"中设置，同时在此设置状态栏字体的颜色(H5无效)，自定义导航栏后，如果想通过"uni.setNavigationBarColor"动态设置导航栏颜色相关参数，是可能会出问题的，请勿使用此方式。

// pages.json

"pages": [
	// navbar-自定义导航栏
	{
		"path": "/pages/navbar/index",
		"style": {
			"navigationStyle": "custom" ,// 隐藏系统导航栏
			"navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
		}
	}
]

// pages.json

"pages": [
	// navbar-自定义导航栏
	{
		"path": "/pages/navbar/index",
		"style": {
			"navigationStyle": "custom" ,// 隐藏系统导航栏
			"navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
		}
	}
]

导航栏高度

可以通过 height (单位px，默认44，和uni-app统导航栏高度一致)配置导航栏的高度，此高度为导航栏内容的高度，不含状态栏的高度，组件内部会自动加上状态栏的高度，并填充状态栏的占位区域。

自定义导航栏内容

通过自定义 slot 传入的内容

vue

<template>
	<view>
        <wu-navbar
            leftText="返回"
            title="个人中心"
            :safeAreaInsetTop="false"
        >
            <template #left>
                <view class="wu-nav-slot">
                    <wu-icon
                        name="arrow-left"
                        size="19"
                    ></wu-icon>
                    <wu-line
                        direction="column"
                        :hairline="false"
                        length="16"
                        margin="0 8px"
                    ></wu-line>
                    <wu-icon
                        name="home"
                        size="20"
                    ></wu-icon>
                </view>
            </template>
        </wu-navbar>
	</view>
</template>

<template>
	<view>
        <wu-navbar
            leftText="返回"
            title="个人中心"
            :safeAreaInsetTop="false"
        >
            <template #left>
                <view class="wu-nav-slot">
                    <wu-icon
                        name="arrow-left"
                        size="19"
                    ></wu-icon>
                    <wu-line
                        direction="column"
                        :hairline="false"
                        length="16"
                        margin="0 8px"
                    ></wu-line>
                    <wu-icon
                        name="home"
                        size="20"
                    ></wu-icon>
                </view>
            </template>
        </wu-navbar>
	</view>
</template>

自定义导航栏背景颜色

wu-ui提供了一个 bgColor 参数，可以自定义导航栏的背景颜色：

渐变色
透明色
普通色

vue

<template>
	<view>
		<wu-navbar title="" :bgColor="bgColor"></wu-navbar>
		<view class="content">
			<!-- 正文内容 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))',
			}
		}
	}
</script>

<template>
	<view>
		<wu-navbar title="" :bgColor="bgColor"></wu-navbar>
		<view class="content">
			<!-- 正文内容 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))',
			}
		}
	}
</script>

API

属性名	说明	类型	默认值	可选值
safeAreaInsetTop	是否开启顶部安全区适配	Boolean	true	true / false
placeholder	固定在顶部时，是否生成一个等高元素，以防止塌陷	Boolean	false	true / false
fixed	导航栏是否固定在顶部	Boolean	true	true / false
border	导航栏底部是否显示下边框	Boolean	false	true / false
showLeft	是否显示左边	Boolean	true	true / false
mpRightReserveCapsule	小程序端导航栏右侧是否预留胶囊位置	Boolean	true	true / false
autoBack	点击左侧区域(返回图标)，是否自动返回上一页	Boolean	false	true / false
leftIcon	左边返回图标的名称，只能为wu-ui自带的图标	String	arrow-left	-
leftText	左边的提示文字	String	-	-
rightIcon	右边返回图标的名称，只能为wu-ui自带的图标	String	-	-
rightText	右边的提示文字	String	-	-
title	导航栏标题，如设置为空字符，将会隐藏标题占位区域	String	-	-
bgColor	导航栏背景设置	String	#ffffff	-
titleWidth	导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx	String / Number	400rpx	-
height	导航栏高度(不包括状态栏高度在内，内部自动加上)，单位px	String / Number	44px	-
leftIconSize	左侧返回图标的大小	String / Number	20px	-
leftIconColor	左侧返回图标的颜色	String	#303133	-
titleStyle	标题的样式，对象或字符串形式	String / Object	-	-
customStyle	定义需要用到的外部样式	String / Object	-	-

方法名	说明	回调参数
leftClick	点击左侧区域	-
rightClick	点击右侧区域	-

名称	说明
left	自定义左侧部分内容
right	自定义右侧部分内容
center	自定义中部内容

平台兼容性

基本使用

注意事项

导航栏高度

自定义导航栏内容

自定义导航栏背景颜色

API

Navbar Props

Navbar Event

Navbar Slot

Navbar 自定义导航栏 ​

平台兼容性 ​

基本使用 ​

注意事项 ​

导航栏高度 ​

自定义导航栏内容 ​

自定义导航栏背景颜色 ​

API ​

Navbar Props ​

Navbar Event ​

Navbar Slot ​

Navbar 自定义导航栏

平台兼容性

基本使用

注意事项

导航栏高度

自定义导航栏内容

自定义导航栏背景颜色

API

Navbar Props

Navbar Event

Navbar Slot