Tuniao UI Uniapp V3

Appearance

12:13

TnTabs 标签栏 ​

该组件，是一个 tabs 标签栏组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动

组件位置 ​

typescript
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
typescript
import TnTabs from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs.vue'
import TnTabsItem from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs-item.vue'
import TnTabs from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs.vue'
import TnTabsItem from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs-item.vue'

平台差异说明 ​

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

基础使用 ​

  • 通过TnTabs中的v-model绑定当前选中TnTabsItem的索引值或者通过设置TnTabsItem的name属性设置当前选中的值
  • 通过TnTabsItem的title设置显示的文字

注意

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

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

const currentTabIndex = ref(0)
const tabsData = [
  {
    text: '关注',
  },
  {
    text: '推荐',
  },
  {
    text: '热榜',
  },
  {
    text: '搞笑',
  },
  {
    text: '视频',
  },
  {
    text: '汽车科技',
  },
  {
    text: '手机科技',
  },
  {
    text: '音乐',
  },
  {
    text: '电影',
  },
  {
    text: '游戏',
  },
]
</script>

<template>
  <TnTabs v-model="currentTabIndex">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
  </TnTabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const currentTabIndex = ref(0)
const tabsData = [
  {
    text: '关注',
  },
  {
    text: '推荐',
  },
  {
    text: '热榜',
  },
  {
    text: '搞笑',
  },
  {
    text: '视频',
  },
  {
    text: '汽车科技',
  },
  {
    text: '手机科技',
  },
  {
    text: '音乐',
  },
  {
    text: '电影',
  },
  {
    text: '游戏',
  },
]
</script>

<template>
  <TnTabs v-model="currentTabIndex">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
  </TnTabs>
</template>

自定义标签栏样式 ​

  • 通过TnTabs中的height设置标签栏的高度，默认单位是rpx
  • 通过TnTabs中的bar-width设置标签栏滑块的宽度，默认单位是rpx
  • 通过TnTabs中的bar-color设置内置滑块的颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色
  • 通过TnTabs中的active-color设置选中时的颜色，如果单独设置了TnTabsItem的active-color则会覆盖TnTabs中的active-color
  • 通过TnTabs中的color设置未选中时的颜色，如果单独设置了TnTabsItem的color则会覆盖TnTabs中的color
  • 通过TnTabs中的font-size设置文字的大小，如果单独设置了TnTabsItem的font-size则会覆盖TnTabs中的font-size

将TnTabs中bottom-shadow设置为false可以隐藏底部的阴影

设置TnTabs的bg-color可以修改标签栏的背景颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值背景颜色

自定义主题颜色 ​

vue
<template>
  <TnTabs
    v-model="currentTabIndex"
    bg-color="tn-gradient__cool-6"
    color="#fff"
    active-color="tn-blue-dark"
    bar-color="tn-red"
  >
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
      :active-color="index === 2 ? 'tn-red' : ''"
    />
  </TnTabs>
</template>
<template>
  <TnTabs
    v-model="currentTabIndex"
    bg-color="tn-gradient__cool-6"
    color="#fff"
    active-color="tn-blue-dark"
    bar-color="tn-red"
  >
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
      :active-color="index === 2 ? 'tn-red' : ''"
    />
  </TnTabs>
</template>

自定义高度和文字大小 ​

vue
<template>
  <TnTabs
    v-model="currentTabIndex"
    height="100rpx"
    font-size="32"
    bar-width="60"
  >
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
  </TnTabs>
</template>
<template>
  <TnTabs
    v-model="currentTabIndex"
    height="100rpx"
    font-size="32"
    bar-width="60"
  >
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
  </TnTabs>
</template>

设置 Item 的角标 ​

通过给TnTabsItem传递badge-config来设置角标的样式，badge-config是一个对象，可以传递以下参数

  • value设置角标的值，如果设置了value，则会显示一个带数字的角标
  • dot设置角标为一个小圆点，如果设置了dot，则会显示一个小圆点

如果不传递则不设置角标

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

const currentTabIndex = ref(0)
const tabsData = [
  {
    text: '关注',
    badgeConfig: {
      value: 10,
    },
  },
  {
    text: '推荐',
    badgeConfig: {
      value: 20,
    },
  },
  {
    text: '热榜',
    badgeConfig: {
      dot: true,
    },
  },
  {
    text: '搞笑',
  },
]
</script>

<template>
  <TnTabs v-model="currentTabIndex">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
      :badge-config="item.badgeConfig"
    />
  </TnTabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const currentTabIndex = ref(0)
const tabsData = [
  {
    text: '关注',
    badgeConfig: {
      value: 10,
    },
  },
  {
    text: '推荐',
    badgeConfig: {
      value: 20,
    },
  },
  {
    text: '热榜',
    badgeConfig: {
      dot: true,
    },
  },
  {
    text: '搞笑',
  },
]
</script>

<template>
  <TnTabs v-model="currentTabIndex">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
      :badge-config="item.badgeConfig"
    />
  </TnTabs>
</template>

禁止滑动 ​

通过给TnTabs传递scroll来设置是否禁止滑动，如果设置为false则禁止滑动

如果禁止了滑动之后，TnTabsItem中的标签是平分整体的宽度，如果标签的数量过多，会导致标签的被隐藏

注意

建议如果TnTabsItem少于 5 个则禁止滑动，可以获得更好的用户体验

vue
<template>
  <TnTabs v-model="currentTabIndex" :scroll="false">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
  </TnTabs>
</template>
<template>
  <TnTabs v-model="currentTabIndex" :scroll="false">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
  </TnTabs>
</template>

隐藏底部小滑块 ​

通过给TnTabs传递bar来设置是否隐藏底部的小滑块，如果设置为false则隐藏底部的小滑块

vue
<template>
  <TnTabs v-model="currentTabIndex" :bar="false">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
  </TnTabs>
</template>
<template>
  <TnTabs v-model="currentTabIndex" :bar="false">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
  </TnTabs>
</template>

自定义滑块 ​

在bar插槽中可以自定义滑块的内容

vue
<template>
  <TnTabs v-model="currentTabIndex">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
    <template #bar>
      <view class="custom-bar">
        <TnIcon name="tabs-smile" />
      </view>
    </template>
  </TnTabs>
</template>

<style lang="scss" scoped>
.custom-bar {
  line-height: 1;
  font-size: 40rpx;
  color: var(--tn-color-primary);
  position: relative;
  bottom: -10rpx;
}
</style>
<template>
  <TnTabs v-model="currentTabIndex">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
    <template #bar>
      <view class="custom-bar">
        <TnIcon name="tabs-smile" />
      </view>
    </template>
  </TnTabs>
</template>

<style lang="scss" scoped>
.custom-bar {
  line-height: 1;
  font-size: 40rpx;
  color: var(--tn-color-primary);
  position: relative;
  bottom: -10rpx;
}
</style>

切换拦截 ​

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

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

const currentTabIndex = ref(0)

// 拦截第5个tab
const beforeSwitch = (index: number) => {
  if (index === 4) {
    uni.showToast({
      icon: 'none',
      title: '被拦截了',
    })
    return false
  }
  return true
}
</script>

<template>
  <TnTabs v-model="currentTabIndex" :before-switch="beforeSwitch">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
  </TnTabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const currentTabIndex = ref(0)

// 拦截第5个tab
const beforeSwitch = (index: number) => {
  if (index === 4) {
    uni.showToast({
      icon: 'none',
      title: '被拦截了',
    })
    return false
  }
  return true
}
</script>

<template>
  <TnTabs v-model="currentTabIndex" :before-switch="beforeSwitch">
    <TnTabsItem
      v-for="(item, index) in tabsData"
      :key="index"
      :title="item.text"
    />
  </TnTabs>
</template>

API ​

Tabs Props ​

属性名说明类型默认值可选值
v-model/model-value当前选中的 Item 的索引String | Number--
height标签栏高度，默认单位为 rpx，可以传入带单位的尺寸值String80rpx-
bar-width滑块的宽度，默认单位为 rpx，可以传入带单位的尺寸值String40rpx-
bg-color背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgbaString--
bar-color滑块的颜色，可以使用图鸟内置的背景色、hex、rgb、rgbaString--
color默认颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
active-color选中时的颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
font-size文字大小，默认单位为 rpx，可以传入带单位的尺寸值String--
active-font-size标签激活时的字体大小，默认单位为 rpx，可以传入带单位的尺寸值String--
bottom-shadow显示底部阴影Booleantruefalse
scroll是否可以滚动Booleantruefalse
bar是否显示滑块Booleantruefalse
active-bold激活时字体是否加粗Booleantruefalse
offset-top距离顶部的距离，默认单位 pxNumber0-
before-switch切换前回调(index: number) => Promise<boolean> | boolean--

Tabs Emits ​

事件名说明类型
changeitem 切换时的回调函数(val: string | number) => void

Tabs Slots ​

插槽名说明子标签
default标签内容TnTab

TabsItem Props ​

属性名说明类型默认值可选值
nameTabsItem 唯一标识String | Number--
title显示的文本内容String--
badge-config角标配置，如果不显示角标可以不设置或者设置为空TabsItemBadgeConfig--
disabled禁止点击选择Booleanfalsetrue
color默认颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
active-color选中时的颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
font-size文字大小，默认单位为 rpx，可以传入带单位的尺寸值String--
active-font-size标签激活时的字体大小，默认单位为 rpx，可以传入带单位的尺寸值String--

TabsItem Emits ​

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

TabsItemBadgeConfig ​

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

Tuniao UI

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