TabBar 标签栏

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

使用指南

在 Taro 文件中引入组件

:::demo

  1. import { AtTabBar } from 'taro-ui'

:::

一般用法

:::demo

  1. <AtTabBar
  2.   tabList={[
  3.     { title: '待办事项', text: 8 },
  4.     { title: '拍照' },
  5.     { title: '通讯录', dot: true }
  6.   ]}
  7.   onClick={this.handleClick}
  8.   current={this.state.current}
  9. />

:::

带图标标签栏

:::demo

  1. <AtTabBar
  2.   tabList={[
  3.     { title: '待办事项', iconType: 'bullet-list', text: 'new' },
  4.     { title: '拍照', iconType: 'camera' },
  5.     { title: '文件夹', iconType: 'folder', text: '100', max: '99' }
  6.   ]}
  7.   onClick={this.handleClick}
  8.   current={this.state.current}
  9. />

:::

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

:::demo

  1. <AtTabBar
  2.   backgroundColor='#ececec'
  3.   color='#ea6bb8'
  4.   tabList={[
  5.     { title: '待办事项', iconType: 'bullet-list', text: 'new' },
  6.     { title: '拍照', iconType: 'camera' },
  7.     { title: '文件夹', iconType: 'folder', text: '100', max: '99' }
  8.   ]}
  9.   onClick={this.handleClick}
  10.   current={this.state.current}
  11. />

:::

固定底部

:::demo

  1. <AtTabBar
  2.   fixed
  3.   tabList={[
  4.     { title: '待办事项', iconType: 'bullet-list', text: 'new' },
  5.     { title: '拍照', iconType: 'camera' },
  6.     { title: '文件夹', iconType: 'folder', text: '100', max: '99' }
  7.   ]}
  8.   onClick={this.handleClick}
  9.   current={this.state.current}
  10. />

:::

参数

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

tabList object字段详解

参数 说明 类型 可选值 默认值 可选或必填
title 标题 String - 0 必填
iconType 未选中时展示的 icon 类型，仅支持 AtIcon 支持的类型 String - - 可选
selectedIconType 选中时展示的 icon 类型，仅支持 AtIcon 支持的类型 String - - 可选
text 右上角显示到文本，可以为数字或文字，如果有 dot，优先显示 dot String - - 可选
max text 可显示的最大数字，超过则显示最大数字加’+’，如’99+’ Number - - 可选
dot 是否显示红点，优先级比 text 高 Boolean - false 可选

事件

事件名称 说明 返回参数
onClick 点击触发事件 选中 tab 列表索引值