Tabs 标签页

标签页组件，用于让用户在不同的视图中进行切换。在 iOS 端的次级页面中，不建议使用左右滑动来切换 Tab，这个和 iOS 的左滑返回存在冲突

使用指南

在 Taro 文件中引入组件

:::demo

import { AtTabs, AtTabsPane} from 'taro-ui'

:::

一般用法

:::demo

<AtTabs
  current={this.state.current}
  tabList={[
    { title: '标签页1' },
    { title: '标签页2' },
    { title: '标签页3' }
  ]}
  onClick={this.handleClick}>
  <AtTabsPane>
    <View className='tab-content'>标签页一的内容</View>
  </AtTabsPane>
  <AtTabsPane>
    <View className='tab-content'>标签页二的内容</View>
  </AtTabsPane>
  <AtTabsPane>
    <View className='tab-content'>标签页三的内容</View>
  </AtTabsPane>
</AtTabs>

禁止内容切换动画

:::demo

<AtTabs
  current={this.state.current}
  tabList={[
    { title: '标签页1' },
    { title: '标签页2' },
    { title: '标签页3' }
  ]}
  onClick={this.handleClick}>
</AtTabs>
{current === 0
  ？ <AtTabsPane>
    <View className='tab-content'>标签页一的内容</View>
  </AtTabsPane>
  : null
}
{current === 1
  ？ <AtTabsPane>
    <View className='tab-content'>标签页二的内容</View>
  </AtTabsPane>
  : null
}
{current === 2
  ？ <AtTabsPane>
    <View className='tab-content'>标签页三的内容</View>
  </AtTabsPane>
  : null
}

:::

参数

tabList object字段详解

事件