TabBar 标签栏

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

使用指南

在 Taro 文件中引入组件

:::demo

import { AtTabBar } from 'taro-ui'

:::

一般用法

:::demo

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

:::

带图标标签栏

:::demo

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

:::

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

:::demo

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

:::

固定底部

:::demo

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

:::

参数

tabList object字段详解

事件