SwipeAction 滑动操作

滑动操作组件。

定义

结合手势操作，从屏幕一侧唤出操作。

规则

  • 一次只可滑动一行列表

  • 点击任意按钮之外处或往回滑动该列表可隐藏操作。

代码演示

基本

  1. import { SwipeAction, List } from 'antd-mobile';
  3. function handleClick(e) {
  4.   console.log('clicked', e);
  5. }
  7. const SwipeActionExample = () => (
  8.   <List>
  9.     <SwipeAction
  10.       style={{ backgroundColor: 'gray' }}
  11.       autoClose
  12.       right={[
  13.         {
  14.           text: 'Cancel',
  15.           onPress: () => console.log('cancel'),
  16.           style: { backgroundColor: '#ddd', color: 'white' },
  17.         },
  18.         {
  19.           text: 'Delete',
  20.           onPress: () => console.log('delete'),
  21.           style: { backgroundColor: '#F4333C', color: 'white' },
  22.         },
  23.       ]}
  24.       left={[
  25.         {
  26.           text: 'Reply',
  27.           onPress: () => console.log('reply'),
  28.           style: { backgroundColor: '#108ee9', color: 'white' },
  29.         },
  30.         {
  31.           text: 'Cancel',
  32.           onPress: () => console.log('cancel'),
  33.           style: { backgroundColor: '#ddd', color: 'white' },
  34.         },
  35.       ]}
  36.       onOpen={() => console.log('global open')}
  37.       onClose={() => console.log('global close')}
  38.     >
  39.       <List.Item
  40.         extra="More"
  41.         arrow="horizontal"
  42.         onClick={handleClick}
  43.       >
  44.         Have left and right buttons
  45.       </List.Item>
  46.     </SwipeAction>
  47.     <SwipeAction
  48.       style={{ backgroundColor: 'gray' }}
  49.       autoClose
  50.       right={[
  51.         {
  52.           text: 'Cancel',
  53.           onPress: () => console.log('cancel'),
  54.           style: { backgroundColor: '#ddd', color: 'white' },
  55.         },
  56.         {
  57.           text: 'Delete',
  58.           onPress: () => console.log('delete'),
  59.           style: { backgroundColor: '#F4333C', color: 'white' },
  60.         },
  61.       ]}
  62.       left={[
  63.         {
  64.           text: 'Reply',
  65.           onPress: () => console.log('reply'),
  66.           style: { backgroundColor: '#108ee9', color: 'white' },
  67.         },
  68.         {
  69.           text: 'Cancel',
  70.           onPress: () => console.log('cancel'),
  71.           style: { backgroundColor: '#ddd', color: 'white' },
  72.         },
  73.       ]}
  74.       onOpen={() => console.log('global open')}
  75.       onClose={() => console.log('global close')}
  76.     >
  77.       <List.Item
  78.         extra="More"
  79.         arrow="horizontal"
  80.         onClick={handleClick}
  81.       >
  82.         Have left and right buttons
  83.       </List.Item>
  84.     </SwipeAction>
  85.   </List>
  86. );
  88. ReactDOM.render(<SwipeActionExample />, mountNode);

SwipeAction滑动操作 - 图1

API

适用平台：WEB、React-Native

SwipeAction

属性说明类型默认值
styleswipeout 样式Object
left左侧按钮组Arraynull
right右侧按钮组Arraynull
autoClose点击按钮后自动隐藏按钮Booleanfunction() {}
onOpen打开时回调函数(): voidfunction() {}
disabled禁用 swipeoutBooleanfalse
onClose关闭时回调函数(): voidfunction() {}

Button

参数说明类型默认值
text按钮文案StringClick
style按钮样式Object
onPress按钮点击事件(): voidfunction() {}
className(web only)按钮样式类String