Tuniao UI Uniapp V3

Appearance

12:13

TnTabbar 底部导航栏 ​

该组件一般用于自定义底部导航栏

使用自定义底部导航栏可以让页面更加酷炫，脱离原声底部导航栏的限制，但是对应的性能上或多或少会受影响

提示

建议底部导航 Item 数量为 2 到 5 个之间

组件位置 ​

typescript
import TnTabbar from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar.vue'
import TnTabbarItem from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar-item.vue'
import TnTabbar from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar.vue'
import TnTabbarItem from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar-item.vue'
typescript
import TnTabbar from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar.vue'
import TnTabbarItem from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar-item.vue'
import TnTabbar from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar.vue'
import TnTabbarItem from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar-item.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

  • 通过TnTabbar中的v-model绑定当前选中TnTabbarItem的索引值如果有设置TnTabbarItem的name属性则返回name的值
  • 设置fixed为true可以将导航栏固定在底部
  • 通过TnTabbarItem的icon设置默认显示的icon
  • 通过TnTabbarItem的active-icon设置选中时显示的icon
  • 通过TnTabbarItem的text设置默认显示的文字

注意

如果设置了TnTabbarItem的name属性，请确保每个TnTabbarItem的name属性值都不一样，否则会导致v-model绑定的值不准确

vue
<script lang="ts" setup>
import { ref } from 'vue'

const currentTabbar = ref(0)

// 导航栏数据
const tabbarData = [
  {
    name: '首页',
    icon: 'home',
    activeIcon: 'home-fill',
  },
  {
    name: '爱好',
    icon: 'like',
    activeIcon: 'like-fill',
  },
  {
    name: '积分',
    icon: 'shop',
    activeIcon: 'shop-fill',
  },
  {
    name: '热谤',
    icon: 'fire',
    activeIcon: 'fire-fill',
  },
  {
    name: '我的',
    icon: 'my-circle',
    activeIcon: 'my-circle-fill',
  },
]
</script>

<template>
  <TnTabbar v-model="currentTabbar" fixed>
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
    />
  </TnTabbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const currentTabbar = ref(0)

// 导航栏数据
const tabbarData = [
  {
    name: '首页',
    icon: 'home',
    activeIcon: 'home-fill',
  },
  {
    name: '爱好',
    icon: 'like',
    activeIcon: 'like-fill',
  },
  {
    name: '积分',
    icon: 'shop',
    activeIcon: 'shop-fill',
  },
  {
    name: '热谤',
    icon: 'fire',
    activeIcon: 'fire-fill',
  },
  {
    name: '我的',
    icon: 'my-circle',
    activeIcon: 'my-circle-fill',
  },
]
</script>

<template>
  <TnTabbar v-model="currentTabbar" fixed>
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
    />
  </TnTabbar>
</template>

自定义导航栏样式 ​

  • 通过TnTabbar中的height设置导航栏的高度
  • 通过TnTabbar中的active-color设置选中时的颜色，如果单独设置了TnTabbarItem的active-color则会覆盖TnTabbar中的active-color
  • 通过TnTabbar中的inactive-color设置未选中时的颜色，如果单独设置了TnTabbarItem的inactive-color则会覆盖TnTabbar中的inactive-color
  • 通过TnTabbar中的icon-size设置图标的大小，如果单独设置了TnTabbarItem的icon-size则会覆盖TnTabbar中的icon-size
  • 通过TnTabbar中的font-size设置文字的大小，如果单独设置了TnTabbarItem的font-size则会覆盖TnTabbar中的font-size

将TnTabbar中top-shadow设置为false可以隐藏顶部的阴影

设置TnTabbar的bg-color可以修改导航栏的背景颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色，需要注意如果设置frosted为true时开启了毛玻璃效果，那么bg-color将只能传递rgba的色值

vue
<template>
  <TnTabbar
    active-color="tn-yellow"
    inactive-color="rgba(1, 190, 250, 0.3)"
    height="140rpx"
    icon-size="48"
    font-size="34"
  >
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
    />
  </TnTabbar>
</template>
<template>
  <TnTabbar
    active-color="tn-yellow"
    inactive-color="rgba(1, 190, 250, 0.3)"
    height="140rpx"
    icon-size="48"
    font-size="34"
  >
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
    />
  </TnTabbar>
</template>

设置角标 ​

角标仅能在非凸起按钮上设置

  • 通过设置TnTabbarItem的badge可以设置角标的内容
  • 通过设置TnTabbarItem的badge-config可以配置角标的属性

显示带内容的角标 ​

vue
<template>
  <TnTabbar>
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
      badge="99"
    />
  </TnTabbar>
</template>
<template>
  <TnTabbar>
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
      badge="99"
    />
  </TnTabbar>
</template>

显示点角标 ​

vue
<template>
  <TnTabbar>
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
      badge="99"
      :badge-config="{
        dot: true,
      }"
    />
  </TnTabbar>
</template>
<template>
  <TnTabbar>
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
      badge="99"
      :badge-config="{
        dot: true,
      }"
    />
  </TnTabbar>
</template>

设置 TabbarItem 突出显示 ​

不建议动态设置 TabbarItem 突出显示，建议将中间的突出显示

通过设置TnTabbarItem的bulge为true可以将对应的TnTabbarItem突出显示

  • 通过TnTabbarItem的bulge-bg-color可以单独设置凸起按钮激活时的背景，如果不设置默认使用active-color
  • 通过TnTabbarItem的bulge-text-color可以单独设置凸起按钮激活时的文字颜色
vue
<template>
  <TnTabbar v-model="currentTabbar" fixed>
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
      :bulge="index === 2"
      bulge-bg-color="tn-gradient__cool-6"
    />
  </TnTabbar>
</template>
<template>
  <TnTabbar v-model="currentTabbar" fixed>
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
      :bulge="index === 2"
      bulge-bg-color="tn-gradient__cool-6"
    />
  </TnTabbar>
</template>

设置切换时动画 ​

设置TnTabbar的switch-animation为true可以开启切换时的动画效果，但是需要注意，凸起按钮暂时不支持切换动画

vue
<template>
  <TnTabbar v-model="currentTabbar" fixed switch-animation>
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
    />
  </TnTabbar>
</template>
<template>
  <TnTabbar v-model="currentTabbar" fixed switch-animation>
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
    />
  </TnTabbar>
</template>

切换拦截 ​

通过TnTabbar的before-switch可以拦截切换事件，返回false获取返回Promise且被reject可以阻止切换

vue
<script lang="ts" setup>
import { ref } from 'vue'

const currentTabbar = ref(0)

// 拦截第5个菜单
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const beforeSwitch = (index: number, name: string | number) => {
  if (index === 4) {
    uni.showToast({
      icon: 'none',
      title: '被拦截了',
    })
    return false
  }
  return true
}
</script>

<template>
  <TnTabbar v-model="currentTabbar" fixed :before-switch="beforeSwitch">
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
    />
  </TnTabbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const currentTabbar = ref(0)

// 拦截第5个菜单
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const beforeSwitch = (index: number, name: string | number) => {
  if (index === 4) {
    uni.showToast({
      icon: 'none',
      title: '被拦截了',
    })
    return false
  }
  return true
}
</script>

<template>
  <TnTabbar v-model="currentTabbar" fixed :before-switch="beforeSwitch">
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :active-icon="item.activeIcon"
      :text="item.name"
    />
  </TnTabbar>
</template>

API ​

Tabbar Props ​

属性名说明类型默认值可选值
v-model/model-value当前选中的 Item 的索引值String | Number--
height导航栏高度，默认单位为 rpx，可以传入带单位的尺寸值String--
bulge-max-size凸起按钮的最大尺寸，单位 pxNumber80-
bulge-size-percent凸起按钮的尺寸比例，取值范围 0 ~ 1Number0.75-
bg-color背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba，在frosted为true的时候只可以设置 rgba 类型的值String--
frosted开启毛玻璃效果，支付宝小程序不支持该参数Booleanfalsetrue
inactive-color未选中时的颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
active-color选中时的颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
icon-size图标大小，默认单位为 rpx，可以传入带单位的尺寸值String--
font-size文字大小，默认单位为 rpx，可以传入带单位的尺寸值String--
top-shadow是否显示顶部阴影Booleantruefalse
switch-animation切换 Item 动画Booleanfalsetrue
fixed是否固定在底部Booleanfalsetrue
safe-area-inset-bottom是否开启底部安全边距Booleantruefalse
placeholder在固定之后是否开启占位空间Booleantruefalse
before-switch切换前回调(index: number, name: string | number) => Promise<boolean> | boolean--
z-indexZIndexNumber20090-
hidden-fixed-tabbar隐藏固定在底部的导航栏Booleanfalsetrue

Tabbar Emits ​

事件名说明类型
changeitem 切换时的回调函数`(name: string

Tabbar Slots ​

插槽名说明子标签
default导航栏内容TnTabbarItem

Tabbar Expose ​

函数名说明类型
setActiveItem手动设置当前激活的 item(val: string | number) => void

TabbarItem Props ​

属性名说明类型默认值可选值
nameTnTabbarItem 的唯一值，如果没有传递则使用对应的索引值String | Number--
icon默认显示图标String-图标有效值
active-icon选中时显示的图标String-图标有效值
text显示的文本内容String--
inactive-color未选中时的颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
active-color选中时的颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
icon-size图标大小，默认单位为 rpx，可以传入带单位的尺寸值String--
font-size文字大小，默认单位为 rpx，可以传入带单位的尺寸值String--
bulge是否凸起显示Booleanfalsetrue
bulge-bg-color凸起按钮的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba，如果设置了该属性则inactive-color和active-color不会生效String--
bulge-text-color凸起按钮的图标颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
badge设置角标的内容，如果为空或者不设置则不显示角标String | Number--
badge-config角标配置TabbarItemBadgeConfig--
disabled是否禁止点击Booleanfalsetrue

TabbarItem Emits ​

事件名说明类型
clickitem 点击时的回调函数() => void

TabbarItemBadgeConfig ​

参数说明必填
dot显示点角标否

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI