TabBar 标签栏


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

使用指南

在 Taro 文件中引入组件

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

组件依赖的样式文件(仅按需引用时需要)

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

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

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

一般用法

说明:

  • 该组件为受控组件,开发者需要通过 onClick 事件来更新 current 值变化,current 与 onClick 函数必填
  1. 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}
    />
    )
    }
    }

带图标标签栏

  1. <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}
    />

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

  1. <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}
    />

固定底部

  1. <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 进行拓展,具体请查看 拓展图标库详细

  1. <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}
    />

使用图片作为图标

  1. <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}
    />

参数

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

TabBar标签栏 - 图1