swipe-cell 滑动单元格

滑动单元格（Swipe Cell）组件是一种常见的用户界面组件，用于在有限的空间内显示更多的内容。可以左右滑动来展示操作按钮的单元格组件。

Props参数

名称	类型	是否必传	默认值	描述
visible	boolean	否	-	是否显示滑块
sliderButtons	ISwipeCellButton[]	✅	-	滑块按钮
disabled	boolean	否	-	是否禁用滑动
beforeClose	(value: ISwipeCellButton, index: number) => boolean | Promise<boolean>	否	-	点击滑块按钮之前的钩子函数
可以手动控制是否不关闭

示例

import { useState } from 'react'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'
import MMSwipeCell from '~/components/swipe-cell'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { MMButton } from '~/components'
import styles from './index.module.less'

export default () => {
  const [visible, setVisible] = useState(false)

  return (
    <MMPageContainer title="滑动单元格">
      <PageDemoBlock title="默认">传入按钮和点击事件即可</PageDemoBlock>
      <MMSwipeCell
        sliderButtons={[
          { text: '收藏', backgroundColor: 'orange', color: '#fff' },
          { text: '删除', backgroundColor: 'red', color: '#fff' }
        ]}
        onClickButton={(value, index) => {
          Taro.showToast({ icon: 'none', title: value.text })
        }}
      >
        <View className={styles.item}>111</View>
      </MMSwipeCell>
      <View className="spacing" />

      <PageDemoBlock title="禁用">可以禁止滑动</PageDemoBlock>
      <MMSwipeCell
        disabled
        sliderButtons={[
          { text: '收藏', backgroundColor: 'orange', color: '#fff' },
          { text: '删除', backgroundColor: 'red', color: '#fff' }
        ]}
      >
        <View className={styles.item}>disabled</View>
      </MMSwipeCell>
      <View className="spacing" />

      <PageDemoBlock title="受控">
        <MMButton onClick={() => setVisible((pre) => !pre)}>手动控制</MMButton>
      </PageDemoBlock>
      <MMSwipeCell
        visible={visible}
        sliderButtons={[
          { text: '收藏', backgroundColor: 'orange', color: '#fff' },
          { text: '删除', backgroundColor: 'red', color: '#fff' }
        ]}
        onClickButton={(value, index) => {
          Taro.showToast({ icon: 'none', title: value.text })
        }}
        onVisibleChange={setVisible}
      >
        <View className={styles.item}>111</View>
      </MMSwipeCell>
      <View className="spacing" />

      <PageDemoBlock title="拦截关闭">你可以在关闭之前拦截 做一些操作</PageDemoBlock>
      <MMSwipeCell
        sliderButtons={[
          { text: '收藏', backgroundColor: 'orange', color: '#fff' },
          { text: '删除', backgroundColor: 'red', color: '#fff' }
        ]}
        onClickButton={(value, index) => {
          Taro.showToast({ icon: 'none', title: value.text })
        }}
        beforeClose={async (item, index) => {
          return new Promise((resolve) => {
            Taro.showLoading()
            setTimeout(() => {
              Taro.hideLoading()
              resolve(true)
            }, 2000)
          })
        }}
      >
        <View className={styles.item}>点击关闭 做接口验证再关闭</View>
      </MMSwipeCell>
      <View className="spacing" />
    </MMPageContainer>
  )
}