MMSwipeCell 滑动单元格

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

Props

ISwipeCellProps

属性	类型	默认值	必传	说明
visible	boolean		否	是否显示滑块
sliderButtons	ISwipeCellButton[]		是	滑块按钮
disabled	boolean		否	是否禁用滑动
beforeClose	(value: ISwipeCellButton, index: number) => boolean | Promise<boolean>		否	点击滑块按钮之前的钩子函数

代码示例

import { FC, memo } from "react";
import Taro from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import MMNavigation from "../../components/navigation/index";
import MMSwipeCell from "../../components/swipe-cell";
import { styleVar } from "../../components/styles/themes/styleVar";
import MMCell from "../../components/cell";
import PageDemoBlock from "../../components/pageComponents/pageDemoBlock";

/**
 * 滑动单元格
 *
 * @description 可以左右滑动来展示操作按钮的单元格组件。
 * @param {*} props
 * @return {*}
 */
const Component: FC<{}> = (props) => {
  return (
    <View>
      <MMNavigation title="MMSwipeCell" />

      <PageDemoBlock title="基础使用">
        <View>
          <Text>向左边滑动</Text>
        </View>
        <MMSwipeCell
          sliderButtons={[
            { text: "删除", backgroundColor: "#F11D28" },
            { text: "收藏", backgroundColor: styleVar.secondColor },
          ]}
          onClickButton={({ text }) => {
            Taro.showToast({ title: `点击了${text}`, icon: "none" });
          }}
          // onVisibleChange={(visible) => {
          //   console.log('visible', visible)
          // }}
        >
          <MMCell title="标题" size="large">
            内容
          </MMCell>
        </MMSwipeCell>
      </PageDemoBlock>

      <PageDemoBlock title="禁用滑动">
        <MMSwipeCell
          disabled
          sliderButtons={[
            { text: "删除", backgroundColor: "#F11D28" },
            { text: "收藏", backgroundColor: styleVar.secondColor },
          ]}
          onClickButton={({ text }) => {
            Taro.showToast({ title: `点击了${text}`, icon: "none" });
          }}
        >
          <MMCell title="标题" size="large">
            我被禁用了。无法滑动
          </MMCell>
        </MMSwipeCell>
      </PageDemoBlock>

      <PageDemoBlock title="关闭拦截 RN不支持">
        <MMSwipeCell
          sliderButtons={[
            { text: "删除", backgroundColor: "#F11D28" },
            { text: "收藏", backgroundColor: styleVar.secondColor },
          ]}
          beforeClose={(_, index) => {
            return index === 0;
          }}
        >
          <MMCell title="标题" size="large">
            我被禁用了。无法滑动
          </MMCell>
        </MMSwipeCell>
      </PageDemoBlock>
    </View>
  );
};

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