uv-ui

# Tabbar 底部导航栏

✈

组件名：uv-tabbar > uv-tabbar-item

点击下载&安装 (opens new window)

# 优点：

此组件提供了自定义tabbar的能力，具有如下特点：

  • 图标可以使用字体图标(内置图标和扩展图标)或者图片
  • 可以动态切换菜单的数量以及配置
  • 切换菜单之前，可以进行回调鉴权
  • 可以设置角标或数字化提示
  • 有效防止组件区域高度塌陷，无需给父元素额外的内边距或者外边距来避开导航的区域

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √(仅支持微信小程序，原因 (opens new window)) √ √

# 基本使用

推荐您使用list数组遍历循环，案例使用基础方式构建，请根据click事件回调进行后续逻辑操作。

<template>
	<uv-tabbar :value="value" @change="index=>value = index">
		<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
	</uv-tabbar>
</template>
<script>
	export default {
		data() {
			return {
				value: 0
			}
		}
	}
</script>

# 显示徽标

使用dot属性添加--小点--类型徽标，使用badge属性添加--数字--类型徽标。您也可以使用:badge='badge'动态设置徽标数量， 这在消息盒子的展示中是比较好用的功能，类似于uniapp的API uni.setTabBarBadge。

<template>
	<uv-tabbar :value="value" @change="index=>value = index">
		<uv-tabbar-item text="首页" icon="home" dot></uv-tabbar-item>
		<uv-tabbar-item text="放映厅" icon="photo" badge="3"></uv-tabbar-item>
		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
	</uv-tabbar>
</template>
<script>
	export default {
		data() {
			return {
				value: 0
			}
		}
	}
</script>

# 匹配标签的名称

uv-tabbar-item标签设置了name属性，则value值也需要设置对应name的值。不设置name属性@change返回索引，设置返回对应name的值。

<template>
	<uv-tabbar :value="value" @change="name=>value = name">
		<uv-tabbar-item text="首页" icon="home" name="home"></uv-tabbar-item>
		<uv-tabbar-item text="放映厅" icon="photo" name="photo"></uv-tabbar-item>
		<uv-tabbar-item text="直播" icon="play-right" name="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account" name="account"></uv-tabbar-item>
	</uv-tabbar>
</template>
<script>
	export default {
		data(){
			return {
				value: 'photo'
			}
		}
	}
</script>

# 自定义图标

如您需要自定义图标，在uv-tabbar-item标签中使用插槽active-icon和inactive-icon来定义图标和颜色

注意

  1. 使用图片自定义图标需要自己设置图片的宽高
  2. 一旦自定义图标，uv-tabbar-item标签上就不能设置icon属性，否则icon属性优先级更高
<template>
	<uv-tabbar :value="value" @change="index=>value = index">
		<uv-tabbar-item text="首页">
			<template v-slot:active-icon>
				<image class="icon" src="https://cdn.uviewui.com/uview/common/bell-selected.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="https://cdn.uviewui.com/uview/common/bell.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
	</uv-tabbar>
</template>
<script>
	export default {
		data() {
			return {
				value: 0
			}
		}
	}
</script>
<style scoped>
	.icon {
		width: 36rpx;
		height: 36rpx;
	}
</style>

# 拦截切换事件(点击第二个标签)

在切换事件中，处理拦截事件或者您其他js操作逻辑。

<template>
	<uv-tabbar :value="value" @change="change">
		<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
	</uv-tabbar>
</template>
<script>
	export default {
		data(){
			return {
				value: 0
			}
		},
		methods: {
			change(e){
				if (e == 1) {
					return uni.showToast({
						icon: 'none',
						title:'请您先登录'
					})
				} else {
					this.value = e;
				}
			}
		}
	}
</script>

# 边框

组件默认带了顶部边框，如果不需要，配置border为false即可。

<template>
	<uv-tabbar :value="value" :border="false" @change="index=>value = index">
		<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
	</uv-tabbar>
</template>
<script>
	export default {
		data(){
			return {
				value: 0
			}
		}
	}
</script>

# 固定在底部(固定在屏幕最下方)

通过设置fixed为true，该属性默认为true，与原生效果无异，但您可以按照api配置您需要的其他配置，如徽标，边框等

<template>
	<uv-tabbar :value="value" :fixed="true" @change="index=>value = index">
		<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
		<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
	</uv-tabbar>
</template>
<script>
	export default {
		data(){
			return {
				value: 0
			}
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# TabBar Props

参数 说明 类型 默认值 可选值
value 当前匹配项的index。TabBarItem设置了name属性则匹配的name String | Number null -
safeAreaInsetBottom 是否为iPhoneX留出底部安全距离 Boolean true true | false
border 是否显示上方边框 Boolean true true | false
zIndex 元素层级z-index String | Number 1 -
activeColor 选中标签的颜色 String #1989fa -
inactiveColor 未选中标签的颜色 String #7d7e80 -
fixed 是否固定在底部 Boolean true true | false
placeholder fixed定位固定在底部时，是否生成一个等高元素防止塌陷 Boolean true true | false
iconSize 图标大小，自定义图片图标设置该属性无效 String | Number 20 -
customStyle 自定义样式 Object - -

# TabBarItem Props

参数 说明 类型 默认值 可选值
name item标签的名称，作为与uv-tabbar的value参数匹配的标识符 String | Number null -
icon uv-ui内置图标或者绝对路径的图片 String - -
iconSize 图标大小 String | Number 20 -
badge 右上角的角标提示信息 String | Number null -
dot 是否显示圆点，将会覆盖badge参数 Boolean false true | false
text 描述文本 String - -
badgeStyle 控制徽标的位置，对象或者字符串形式，可以设置top和right属性 Object | String 'top: 6px;right:2px;' -

# TabBar Events

事件名 说明 回调参数
@change 切换选项时触发 index：当前要切换项的index或name

# TabBarItem Events

事件名 说明 回调参数
@click 切换选项时触发 index：当前要切换项的index或name

# TabBarItem Slots

名称 说明
active-icon 选中项的图标处自定义内容插槽
inactive-icon 未选中项的图标处自定义内容插槽
text tab项自定义文本插槽

← BackTop 返回顶部 →