标签栏 Tabbar

标签栏组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 包含两个组件：
  • pure-tabbr: 包裹组件。
  • pure-tabbar-item: 标签项组件。
• 通过给包裹组件的 avtiveValue 属性设置激活项的值。
• 通过给包裹组件的 valueKey 属性设置激活项的值字段名称，默认 name。
• 通过给标签项组件属性 item 设置标签项数据。

<template>
    <pure-tabbar :activeValue="activeValue">
        <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item"></pure-tabbar-item>
    </pure-tabbar>
</template>

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

    // 标签栏
    const tabbar = ref([
        { name: "首页", icon: "__dianpu_2", activeIcon: "__dianpu_2", path: "/pages/home/index" },
        { name: "分类", icon: "__fenlei_6", activeIcon: "__fenlei_6", path: "/pages/category/index" },
        { name: "聊天", icon: "__pinglun_3", activeIcon: "__pinglun_3", path: "/pages/chat/index" },
        { name: "购物车", icon: "__gouwu", activeIcon: "__gouwu", path: "/pages/car/index" },
        { name: "我的", icon: "__wode", activeIcon: "__wode", path: "/pages/mine/index" },
    ]);

    // 选中项
    const activeValue = ref("首页");
</script>

标签项数据

属性名	说明	类型	默认值	可选值	版本
name	标签名称、文本	String	-	-	+1.0.0
icon	未激活时的图标，同图标组件（Icon）的 name 属性，参考	String	-	-	+1.0.0
activeIcon	激活时的图标，同图标组件（Icon）的 name 属性，参考	String	-	-	+1.0.0
path	跳转页面路径	String	-	-	+1.0.0

自定义颜色

• 通过包裹组件的 color 属性设置未激活时的颜色。
• 通过包裹组件的 activeColor 属性设置激活时的颜色。

<template>
    <pure-tabbar :activeValue="activeValue" color="#666666" activeColor="#ff0000">
        <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item"></pure-tabbar-item>
    </pure-tabbar>
</template>

自定义大小

• 通过包裹组件的 iconSize 属性设置图标的大小。
• 通过包裹组件的 textSize 属性设置文本的大小。

<template>
    <pure-tabbar :activeValue="activeValue" iconSize="18px" textSize="10px">
        <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item"></pure-tabbar-item>
    </pure-tabbar>
</template>

切换拦截

• 通过包裹组件的 beforeChange 事件拦截切换，返回 true 或 Promise.then 表示允许切换，返回 false 或 Promise.catch 表示不允许切换。

<template>
    <pure-tabbar :activeValue="activeValue" :beforeChange="handleBeforeChange">
        <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item"></pure-tabbar-item>
    </pure-tabbar>
</template>

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

    // 切换前的拦截函数
    function handleBeforeChange(tab) {
        uni.showLoading({
            title: `切换到'${tab.name}'标签页`,
        });

        return new Promise((resolve) => {
            setTimeout(() => {
                activeValue.value = tab.name;
                uni.hideLoading();
                resolve(true);
            }, 2500);
        });
    }
</script>

禁用

• 通过标签项组件的 disabled 属性设置禁用状态。

<template>
    <pure-tabbar :activeValue="activeValue">
        <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item" :disabled="item.disabled"></pure-tabbar-item>
    </pure-tabbar>
</template>

结合徽标组件适用

• 通过默认的 slot 插槽设置徽标组件或其他元素。

<template>
    <pure-tabbar :activeValue="activeValue">
        <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item">
            <pure-badge mode="dot" class="pure-badge-danger"></pure-badge>
        </pure-tabbar-item>
    </pure-tabbar>
</template>

Props

pure-tabbar

属性名	说明	类型	默认值	可选值	版本
hoverClass	全局设置标签项的 hover-class 同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
iconMode	图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	heightFix	-	+1.0.0
safeBottom	是否开启底部安全区域	Boolean	true	-	+1.0.0
color	默认颜色	String	var(--pure-theme-info)	-	+1.0.0
activeColor	激活项颜色	String	var(--pure-theme-primary)	-	+1.0.0
activeValue	当前激活项的值	[String, Number]	undefined	-	+1.0.0
valueKey	激活项的值对应 item 的属性 key	String	name	-	+1.0.0
async	是否开启异步切换，开启后通过 @asyncChange 事件手动控制激活项	Boolean	false	true	+1.0.0
pathKey	表示跳转页面路径的属性 key	String	path	-	+1.0.0
beforeChange	切换前的拦截函数，返回 true 或 Promise.then 表示允许切换，返回 false 或 Promise.catch 表示不允许切换	Function	() => true	-	+1.0.0
iconSize	图标大小	String	-	-	+1.0.0
textSize	蚊子大小	String	-	-	+1.0.0
borderColor	边框（上边框）颜色	String	-	-	+1.0.0

pure-tabbar-item

属性名	说明	类型	默认值	可选值	版本
hoverClass	单独设置标签项的 hover-class 同 view 的 hover-class	String	-	-	+1.0.0
item	标签数据	Object	null	-	+1.0.0
active	激活状态，可以单独设置，也可以在包裹组件上通过 activeValue 设置	Boolean	false	true	+1.0.0
disabled	是否禁用	Boolean	false	true	+1.0.0
disabledClass	禁用时的 class	String	pure-disabled	-	+1.0.0

Event

事件名	说明	回调参数	版本
change	切换事件	tab: 标签数据	+1.0.0
asyncChange	异步切换事件	tab: 标签数据	+1.0.0

Slots

名称	说明	参数	版本
default	默认，可以放置徽标组件等内容	-	+1.0.0
content	item 内容，可以自定义 item 样式	-	+1.0.0