Sidebar 侧边栏 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

该组件一般用于垂直展示的导航栏，用于在不同的内容区域之间进行切换，支持徽标提示、禁用状态、自定义样式等功能。

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

# 基本使用

通过v-model参数绑定当前选中的导航项索引
通过u-sidebar-item子组件定义每个导航项
支持点击切换和状态管理

<template>
	<view style="padding: 20px;">
		<u-sidebar v-model="active" @change="onChange">
			<u-sidebar-item label="标签名称1" />
			<u-sidebar-item label="标签名称2" />
			<u-sidebar-item label="标签名称3" />
		</u-sidebar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: 0
		}
	},
	methods: {
		onChange(data) {
			console.log('选中项：', data);
		}
	}
};
</script>
✅ Copy success!

# 徽标提示

通过badge参数为导航项添加徽标提示，支持数字、字符串或对象配置

<template>
	<u-sidebar v-model="active">
		<u-sidebar-item label="标签名称" dot />
		<u-sidebar-item label="标签名称" badge="5" />
		<u-sidebar-item label="标签名称" :badge="{ value: '99+', type: 'error' }" />
	</u-sidebar>
</template>
✅ Copy success!

# 禁用选项

通过disabled参数禁用某个导航项

<template>
	<u-sidebar v-model="active">
		<u-sidebar-item label="标签名称" />
		<u-sidebar-item label="标签名称" disabled />
		<u-sidebar-item label="标签名称" />
	</u-sidebar>
</template>
✅ Copy success!

# 自定义样式

通过lineColor、activeColor等参数自定义侧边栏的样式

<template>
	<u-sidebar
		v-model="active"
		lineColor="#ff6b6b"
		activeColor="#ff6b6b"
		:width="'200px'"
		:fontSize="'16px'"
	>
		<u-sidebar-item label="自定义样式1" />
		<u-sidebar-item label="自定义样式2" />
		<u-sidebar-item label="自定义样式3" />
	</u-sidebar>
</template>
✅ Copy success!

# 此页面源代码地址

页面源码地址

github

gitee

# API

# Props

参数	说明	类型	默认值	可选值
value	当前导航项的索引	Number \| String	-	-
modelValue	Vue3模式下当前导航项的索引	Number \| String	-	-
width	宽度	String	-	-
fontSize	字体大小	String	-	-
lineHeight	行高	String	-	-
textColor	文本颜色	String	-	-
disabledColor	禁用文本颜色	String	-	-
disabledBgColor	禁用背景颜色	String	-	-
bgColor	背景色	String	-	-
activeColor	激活时文本颜色	String	-	-
activeBgColor	激活时背景颜色	String	-	-
activeBold	激活时是否加粗	Boolean	-	-
activeStyle	激活时的样式	String \| Object	-	-
inactiveStyle	非激活时的样式	String \| Object	-	-
lineWidth	滑块长度	String \| Number	-	-
lineHeight	滑块高度	String \| Number	-	-
lineColor	滑块颜色	String	-	-
lineBgSize	滑块背景显示大小，当滑块背景设置为图片时使用	String	-	-
showLine	是否显示滑块	Boolean	-	-

# Events

事件名	说明	回调参数
change	切换导航项时触发	{index, label, value}

# Slots

名称	说明
default	默认插槽，用于放置 `u-sidebar-item` 组件

# SidebarItem Props

参数	说明	类型	默认值	可选值
label	内容	String	-	-
value	值，用于标识该项	String \| Number	-	-
icon	图标名称	String	-	-
iconSize	图标大小	String \| Number	-	-
iconColor	图标颜色	String	-	-
iconPosition	图标位置	String	-	left / top
badge	右上角的角标提示信息	String \| Number \| Object	-	-
dot	是否显示圆点，将会覆盖badge参数	Boolean	-	-
disabled	是否禁用该项	Boolean	-	-

← wxAuth 微信授权组件 DateStrip 日期横条 →

# Sidebar 侧边栏

# 平台差异说明

# 基本使用

# 徽标提示

# 禁用选项

# 自定义样式

# 此页面源代码地址

# API

# Props

# Events

# Slots

# SidebarItem Props