TabBar 标签栏

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

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

使用指南

在 Taro 文件中引入组件

import { AtTabBar } from 'taro-ui'

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

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

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

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

一般用法

说明：

• 该组件为受控组件，开发者需要通过 onClick 事件来更新 current 值变化，current 与 onClick 函数必填

import Taro from '@tarojs/taro'
import { AtTabBar }  from 'taro-ui'
export default class Index extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      current: 0
    }
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }
  render () {
    return (
      <AtTabBar
        tabList={[
          { title: '待办事项', text: 8 },
          { title: '拍照' },
          { title: '通讯录', dot: true }
        ]}
        onClick={this.handleClick.bind(this)}
        current={this.state.current}
      />
    )
  }
}

带图标标签栏

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

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

<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.bind(this)}
  current={this.state.current}
/>

固定底部

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

使用自定义图标

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

<AtTabBar
  fixed
  tabList={[
    { title: '自定义图标', iconPrefixClass:'fa', iconType: 'clock', text: 'new' },
    { title: '拍照', iconType: 'camera' },
    { title: '文件夹', iconType: 'folder', text: '100', max: 99 }
  ]}
  onClick={this.handleClick.bind(this)}
  current={this.state.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 }
    ]}
  onClick={this.handleClick.bind(this)}
  current={this.state.current}
/>

参数

tabList object 字段详解

事件