标签栏

标签栏组件。

基础使用

• 通过 list 属性设置标签栏数据。
• 通过 value 属性设置当前选中标签索引或值。
• 通过 valueKey 属性设置标签值的键名，默认值为 undefined。

<template>
	<pure-tabbar
		:list="list"
		:value="checked"
		@onClick="_handleClick"
	></pure-tabbar>
</template>

<script setup>
	import { ref } from "vue";

	const list = ref([
		{
			text: "首页",
			value: "home",
			iconPath: "/static/images/i_001.png",
			selectedIconPath: "/static/images/i_002.png"
		},
		{
			text: "分类",
			value: "category",
			iconPath: "/static/images/i_003.png",
			selectedIconPath: "/static/images/i_004.png"
		},
		{
			text: "购物车",
			value: "cart",
			iconPath: "/static/images/i_005.png",
			selectedIconPath: "/static/images/i_006.png"
		},
		{
			text: "我的",
			value: "user",
			iconPath: "/static/images/i_007.png",
			selectedIconPath: "/static/images/i_008.png"
		}
	]);
	const checked = ref(list.value[0]);

	// 切换
	function _handleClick(index, item) {
		checked.value = item;
	}
</script>

使用默认数据

如果未设置 list 数据，则组件会默认读取 pages.json 中 tabBar 配置项中的 list 数据。

<template>
	<pure-tabbar
		:value="checked"
		value-key="text"
		@onClick="_handleClick"
	></pure-tabbar>
</template>

<script setup>
	import { ref } from "vue";

	// 选中项的值
	const checked = ref("首页");

	// 切换
	function _handleClick(index, item) {
		checked.value = item.text;
	}
</script>

选中项

选项是否选中的判断逻辑为：

• 如果 valueKey 为 undefined，则判断选项数据 item 是否等于 value。
• 如果 valueKey 为其他值：
  • 如果 item[valueKey] 存在，则判断 item[valueKey] 是否等于 value。
  • 如果 item[valueKey] 不存在，则判断数据下标 index 是否等于 value。

禁用项

如果列表项数据中包含 disabled 键，且值为 true，则该项为禁用项。

<template>
	<pure-tabbar
		:list="list"
		:value="checked"
		@onClick="_handleClick"
	></pure-tabbar>
</template>

<script setup>
	import { ref } from "vue";

	const list = ref([
		{
			text: "首页",
			value: "home",
			iconPath: "/static/images/i_001.png",
			selectedIconPath: "/static/images/i_002.png"
		},
		{
			text: "分类",
			value: "category",
			iconPath: "/static/images/i_003.png",
			selectedIconPath: "/static/images/i_004.png",
			disabled: true
		},
		{
			text: "购物车",
			value: "cart",
			iconPath: "/static/images/i_005.png",
			selectedIconPath: "/static/images/i_006.png"
		},
		{
			text: "我的",
			value: "user",
			iconPath: "/static/images/i_007.png",
			selectedIconPath: "/static/images/i_008.png"
		}
	]);
	const checked = ref(list.value[0]);

	// 切换
	function _handleClick(index, item) {
		checked.value = item;
	}
</script>

高度

有时需要获取标签栏的高度，以便进行布局，组件提供了以下两种方式获取标签栏组件的高度：

1. 通过 ref 引用获取标签栏组件实例，然后通过实例的 height 属性获取高度。
2. 通过 uni.$pureTabBarHeight 获取标签栏组件的高度。

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
list	Array		标签栏数据
value	String		选中项的索引或值
valueKey	String	undefined	标签值的键名，默认值为 undefined
height	String	50px	标签栏高度
iconSize	String	20px	图标大小
iconMode	String	heightFix	裁剪模式 参考
iconWidth	String		图标宽度
iconHeight	String		图标高度
fontSize	String	10px	字体大小
color	String		字体颜色
activeColor	String	--pure-theme-primary	选中项颜色
iconKey	String	iconPath	未激活状态图标键名
selectedIconKey	String	selectedIconPath	激活状态图标键名
textKey	String	text	标签文本键名
iconOpts	Object		图标配置， 参考
background	String	--pure-background-element	背景
isFixed	Boolean	false	是否固定在底部

事件

名称	参数	说明
onClick	index: 下标; item: 数据	点击事件

对外属性

名称	参数	说明
height	number	组件高度

样式变量

名称	说明
--pure-tabbar-background	背景
--pure-tabbar-height	高度
--pure-tabbar-padding	内边距
--pure-tabbar-item-gap	图标和文字的间距
--pure-tabbar-icon-font-size	图标字体大小
--pure-tabbar-icon-width	图标宽度
--pure-tabbar-icon-height	图标高度
--pure-tabbar-text-font-size	文字字体大小
--pure-tabbar-text-font-weight	文字字体粗细
--pure-tabbar-active-color	选中项颜色