MMTabs tab 切换

Props

IMMTabsProps

属性	类型	默认值	必传	说明
activeIndex	number		是	高亮下标项
data	{ label: string;}[]		是	数据源
itemSpaceBetween	boolean	false	否	是否启用
scroll	boolean		否	是否横向滚动形式
scrollViewProps	ScrollViewProps		否	覆盖

代码示例

import Taro from "@tarojs/taro";
import { FC, memo, useMemo, useState } from "react";
import { View } from "@tarojs/components";
import styles from "./index.module.less";
import MMNavigation from "@wmeimob/taro-design/src/components/navigation";
import MMTabs, { IMMTabsProps } from "../../components/tabs";
import MMCheckbox from "../../components/checkbox";
import PageDemoBlock from "../../components/pageComponents/pageDemoBlock";
import MMSpace from "../../components/space";

interface ISwitchProps {}

const Component: FC<ISwitchProps> = () => {
  const tabs = [
    { label: "待付款待付款待付款待付款待付款" },
    { label: "待发货" },
    { label: "待收货" },
    { label: "待评价" },
    { label: "售后" },
  ];
  const [activeIndex, setActiveIndex] = useState(0);

  const [props, setProps] = useState<Partial<IMMTabsProps>>({
    data: tabs,
    itemSpaceBetween: true,
    scroll: false,
  });

  return (
    <View className={styles.switchStyle}>
      <MMNavigation title="MMTabs" />

      <MMTabs
        {...props}
        activeIndex={activeIndex}
        onTabChange={(_, index) => {
          setActiveIndex(index);
        }}
      />

      <PageDemoBlock title="设置">
        <MMSpace direction="column">
          <MMCheckbox
            value={props.itemSpaceBetween}
            onChange={(ev) => {
              setProps((pre) => ({ ...pre, itemSpaceBetween: ev }));
            }}
          >
            是否启用 tab 项两端对齐
          </MMCheckbox>

          <MMCheckbox
            value={props.scroll}
            onChange={(ev) => {
              setProps((pre) => ({
                ...pre,
                data: ev ? tabs.concat(tabs) : tabs,
                scroll: ev,
              }));
            }}
          >
            是否横向滚动形式
          </MMCheckbox>
        </MMSpace>
      </PageDemoBlock>
    </View>
  );
};

const MMTabsPage = memo(Component);
export default MMTabsPage;