tabs 标签页

标签页（Tabs）组件是一种常见的用户界面组件，用于在多个相关内容之间进行切换。

示例

import { View } from '@tarojs/components'
import { useState } from 'react'
import MMTabs from '~/components/tabs'
import MMPageContainer from '../_components/page-container'

export default () => {
  const [selectedIndex, setSelectedIndex] = useState(0)

  return (
    <MMPageContainer title="标签页">
      <MMTabs data={['First', 'Second', 'Third']} selectedIndex={selectedIndex} onChange={(selectedIndex) => setSelectedIndex(selectedIndex)} />
      <View className="spacingBig" />
      <MMTabs
        data={['胶囊一', '胶囊二', '胶囊三']}
        type="capsule"
        selectedIndex={selectedIndex}
        onChange={(selectedIndex) => setSelectedIndex(selectedIndex)}
      />
      <View className="spacingBig" />
      <MMTabs data={['按钮一', '按钮二', '按钮三']} type="button" selectedIndex={selectedIndex} onChange={(selectedIndex) => setSelectedIndex(selectedIndex)} />
      <View className="spacingBig" />
      <MMTabs
        data={['导航一', '导航二', '导航三', '导航四', '导航五', '导航六', '导航七', '导航八', '导航九']}
        type="scroll"
        selectedIndex={selectedIndex}
        onChange={(selectedIndex) => setSelectedIndex(selectedIndex)}
      />
    </MMPageContainer>
  )
}