MMLoading 加载中

可以左右滑动来展示操作按钮的单元格组件。

Props

MMLoadingProps

属性	类型	默认值	必传	说明
size	number		否	icon
type	ELoadingType | keyof typeof ELoadingType	'fadeDot'	否	类型
color	string		否	颜色
gray	boolean		否	灰色调

代码示例

import { memo, FC, useState } from "react";
import { View } from "@tarojs/components";
import styles from "./index.module.less";
import MMLoading from "../../components/loading";
import MMNavigation from "../../components/navigation";
import PageDemoBlock from "../../components/pageComponents/pageDemoBlock";
import MMSpace from "../../components/space";
import MMStepper from "../../components/stepper";
import MMButton from "../../components/button";
import { styleVar } from "../../components/styles/themes/styleVar";

interface ILoadingPageProps {}

const Component: FC<ILoadingPageProps> = () => {
  const [props, setProps] = useState({
    size: 25,
    gray: false,
    color: styleVar.primaryColor,
  });

  return (
    <View className={styles.loadingPageStyle}>
      <MMNavigation title="Loading" />

      <MMLoading {...props} />
      <View>fadeDot</View>

      <MMLoading type="jelly" {...props} />
      <View>jelly</View>

      <MMLoading type="ball" {...props} />
      <View>ball</View>

      <MMLoading type="spinner" {...props} />
      <View>spinner</View>

      <MMLoading type="rotate" {...props} />
      <View>rotate</View>

      <PageDemoBlock title="设置">
        <MMSpace direction="column" gap={45}>
          <View>设置尺寸</View>
          <MMStepper
            value={props.size}
            min={10}
            max={99}
            onChange={(ev) => setProps((pre) => ({ ...pre, size: ev }))}
          />

          <MMButton
            text="设置颜色"
            loading
            onClick={() => {
              const colors = [
                styleVar.primaryColor,
                styleVar.blue,
                styleVar.pink,
              ];

              const idx =
                (colors.findIndex((color) => color === props.color) + 1) %
                colors.length;

              setProps((pre) => ({ ...pre, color: colors[idx] }));
            }}
          />

          <MMButton
            text={props.gray ? "取消禁用" : "设置禁用"}
            onClick={() => {
              setProps((pre) => ({ ...pre, gray: !pre.gray }));
            }}
          />
        </MMSpace>
      </PageDemoBlock>
    </View>
  );
};

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