Taro UI中的AtTabs

TaroUI 中的 AtTabs 是一个用于创建标签页(tab)组件的组件。它提供了一种简单的方式来切换显示不同的内容。

AtTabs 的使用方式如下：

首先，引入 AtTabs 组件和必要的样式：

import { AtTabs, AtTabsPane } from 'taro-ui'
import 'taro-ui/dist/style/components/tabs.scss'

然后，在你的组件中使用 AtTabs 组件：

<AtTabs current={currentTab} tabList={tabList} onClick={handleTabClick}>
  {tabList.map((tab, index) => (
    <AtTabsPane key={index} current={currentTab} index={index}>
      {/* 渲染对应的内容 */}
    </AtTabsPane>
  ))}
</AtTabs>

这里需要传入以下几个参数：

• current：表示当前选中的 tab 的索引值。
• tabList：一个包含 tab 信息的数组，每个 tab 包含 title 和 icon 等字段。
• onClick：点击 tab 时的回调函数，会传入被点击的 tab 的索引值。

在 AtTabs 组件中使用 AtTabsPane 组件来渲染不同的内容。AtTabsPane 组件有两个必要的参数：

• current：表示当前选中的 tab 的索引值。
• index：表示当前 AtTabsPane 组件对应的 tab 的索引值。

你可以根据需要在不同的 AtTabsPanel 中渲染对应的内容，实现标签页切换的效果。