qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

TabBar 标签栏

标签栏组件，主要用于底部导航，方便用户在不同功能模块之间进行快速切换，建议标签数量控制在3～5个，可以通过控制标签的 text ，dot 属性进行内容更新提示。

建议使用小程序原生的 TabBar ，AtTabBar 只是为了满足特殊情况下的自定义而增加的组件，仅仅是 UI 组件，跟原生的 TabBar 组件是有差异的。

使用指南

在 Taro 文件中引入组件

import { AtTabBar } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/tab-bar.scss";

使用带图标标签栏时还需引入以下样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/icon.scss";

一般用法

说明：

  • 该组件为受控组件，开发者需要通过 onClick 事件来更新 current 值变化，current 与 onClick 函数必填
<template>
  <view>
    <AtTabBar
      :tabList="tabList1"
      @click="handleClick"
      :current="current1"
    />
  </view>
</template>

<script>
export default {
  name: 'TabBarPage',
  data() {
    return {
      current1: 0,
      tabList1: [
        { title: '待办事项', text: 8 },
        { title: '拍照' },
        { title: '通讯录', dot: true }
      ],
    }
  },
  methods: {
    onClick(value) {
      this.current1 = value
    }
  },
}
</script>

带图标标签栏

<AtTabBar
  :tabList="[
    { title: '待办事项', iconType: 'bullet-list', text: 'new' },
    { title: '拍照', iconType: 'camera' },
    { title: '文件夹', iconType: 'folder', text: '100', max: 99 }
  ]"
  @click="handleClick"
  :current="current"
/>

自定义图标颜色、字体颜色、背景颜色

<AtTabBar
  backgroundColor='#ececec'
  color='#ea6bb8'
  :tabList="[
    { title: '待办事项', iconType: 'bullet-list', text: 'new' },
    { title: '拍照', iconType: 'camera' },
    { title: '文件夹', iconType: 'folder', text: '100', max: 99 }
  ]"
  @click="handleClick"
  :current="current"
/>

固定底部

<AtTabBar
  fixed
  :tabList="[
    { title: '待办事项', iconType: 'bullet-list', text: 'new' },
    { title: '拍照', iconType: 'camera' },
    { title: '文件夹', iconType: 'folder', text: '100', max: 99 }
  ]"
  @click="handleClick"
  :current="current"
/>

使用自定义图标

在 AtTabBar 使用自定义图标，需要对 AtIcon 进行拓展，具体请查看 拓展图标库详细

<AtTabBar
  fixed
  :tabList="[
    { title: '自定义图标', iconPrefixClass:'fa', iconType: 'clock', text: 'new' },
    { title: '拍照', iconType: 'camera' },
    { title: '文件夹', iconType: 'folder', text: '100', max: 99 }
  ]"
  @click="handleClick"
  :current="current"
/>

使用图片作为图标

<AtTabBar
  :tabList="[
      { title: '领取中心', image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png', selectedImage: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png', text: 'new' },
      { title: '找折扣', image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png' },
      { title: '领会员', image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png', text: '100', max: 99 }
    ]"
  @click="handleClick"
  :current="current"
/>

参数

参数说明类型可选值默认值
current当前选中的标签索引值，从0计数Number-0
color未选中标签字体与图标颜色String-#333
selectedColor选中标签字体与图标颜色String-#6190E8
fixed是否固定底部Boolean-false
backgroundColor背景颜色String-#fff
iconSize图标大小Number | String-24
fontSize字体大小Number | String-14
tabListtab 列表, object 字段说明请看下表Array-false

tabList object 字段详解

参数说明类型可选值默认值可选或必填
title标题String-0必填
iconPrefixClassicon className 前缀，用于第三方字体图标库，比如想使用'fa fa-clock' 的图标，则 传入iconPrefixClass='fa' iconType='clock',拓展图标库详细String---
iconType未选中时展示的 icon 类型，可扩展第三方字体图标库，拓展图标库详细String--可选
selectedIconType选中时展示的 icon 类型，可扩展第三方字体图标库，拓展图标库详细String--可选
image未选中时图片icon的链接String--可选
selectedImage选中时图片icon的链接String--可选
text右上角显示到文本，可以为数字或文字，如果有 dot，优先显示 dotString--可选
maxtext 可显示的最大数字，超过则显示最大数字加'+'，如'99+'Number--可选
dot是否显示红点，优先级比 text 高Boolean-false可选

事件

事件名称说明返回参数
onClick点击触发事件，开发者需要通过 onClick 事件来更新 current 值变化，onClick 函数必填选中 tab 列表索引值