SwipeAction 滑动操作

滑动操作组件。

定义

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

规则

  • 一次只可滑动一行列表

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

代码演示

基本

  1. import { SwipeAction, List } from 'antd-mobile';
  3. const SwipeActionExample = () => (
  4.   <List>
  5.     <SwipeAction
  6.       style={{ backgroundColor: 'gray' }}
  7.       autoClose
  8.       right={[
  9.         {
  10.           text: 'Cancel',
  11.           onPress: () => console.log('cancel'),
  12.           style: { backgroundColor: '#ddd', color: 'white' },
  13.         },
  14.         {
  15.           text: 'Delete',
  16.           onPress: () => console.log('delete'),
  17.           style: { backgroundColor: '#F4333C', color: 'white' },
  18.         },
  19.       ]}
  20.       left={[
  21.         {
  22.           text: 'Reply',
  23.           onPress: () => console.log('reply'),
  24.           style: { backgroundColor: '#108ee9', color: 'white' },
  25.         },
  26.         {
  27.           text: 'Cancel',
  28.           onPress: () => console.log('cancel'),
  29.           style: { backgroundColor: '#ddd', color: 'white' },
  30.         },
  31.       ]}
  32.       onOpen={() => console.log('global open')}
  33.       onClose={() => console.log('global close')}
  34.     >
  35.       <List.Item
  36.         extra="More"
  37.         arrow="horizontal"
  38.         onClick={e => console.log(e)}
  39.       >
  40.         Have left and right buttons
  41.       </List.Item>
  42.     </SwipeAction>
  43.     <SwipeAction
  44.       style={{ backgroundColor: 'gray' }}
  45.       autoClose
  46.       left={[
  47.         {
  48.           text: 'Reply',
  49.           onPress: () => console.log('reply'),
  50.           style: { backgroundColor: '#108ee9', color: 'white' },
  51.         },
  52.         {
  53.           text: 'Cancel',
  54.           onPress: () => console.log('cancel'),
  55.           style: { backgroundColor: '#ddd', color: 'white' },
  56.         },
  57.       ]}
  58.       onOpen={() => console.log('global open')}
  59.       onClose={() => console.log('global close')}
  60.     >
  61.       <List.Item
  62.         extra="More"
  63.         arrow="horizontal"
  64.         onClick={e => console.log(e)}
  65.       >
  66.         Only left buttons
  67.       </List.Item>
  68.     </SwipeAction>
  69.     <SwipeAction
  70.       style={{ backgroundColor: 'gray' }}
  71.       autoClose
  72.       right={[
  73.         {
  74.           text: 'Cancel',
  75.           onPress: () => console.log('cancel'),
  76.           style: { backgroundColor: '#ddd', color: 'white' },
  77.         },
  78.         {
  79.           text: 'Delete',
  80.           onPress: () => console.log('delete'),
  81.           style: { backgroundColor: '#F4333C', color: 'white' },
  82.         },
  83.       ]}
  84.       onOpen={() => console.log('global open')}
  85.       onClose={() => console.log('global close')}
  86.     >
  87.       <List.Item
  88.         extra="More"
  89.         arrow="horizontal"
  90.         onClick={e => console.log(e)}
  91.       >
  92.         Only right buttons
  93.       </List.Item>
  94.     </SwipeAction>
  95.     <SwipeAction
  96.       style={{ backgroundColor: 'gray' }}
  97.       autoClose
  98.       right={[
  99.         {
  100.           text: 'short',
  101.           onPress: () => console.log('cancel'),
  102.           style: { backgroundColor: '#ddd', color: 'white' },
  103.         },
  104.         {
  105.           text: 'long text',
  106.           onPress: () => console.log('delete'),
  107.           style: { backgroundColor: '#F4333C', color: 'white' },
  108.         },
  109.       ]}
  110.       onOpen={() => console.log('global open')}
  111.       onClose={() => console.log('global close')}
  112.     >
  113.       <List.Item
  114.         extra="More"
  115.         arrow="horizontal"
  116.         onClick={e => console.log(e)}
  117.       >
  118.         Different button width
  119.       </List.Item>
  120.     </SwipeAction>
  121.     <SwipeAction
  122.       style={{ backgroundColor: 'gray' }}
  123.       autoClose
  124.       right={[
  125.         {
  126.           text: 'button1',
  127.           onPress: () => console.log('cancel'),
  128.           style: { backgroundColor: '#ddd', color: 'white' },
  129.         },
  130.         {
  131.           text: 'button2',
  132.           onPress: () => console.log('delete'),
  133.           style: { backgroundColor: '#F4333C', color: 'white' },
  134.         },
  135.       ]}
  136.       onOpen={() => console.log('global open')}
  137.       onClose={() => console.log('global close')}
  138.     >
  139.       <List.Item
  140.         extra="More"
  141.         arrow="horizontal"
  142.         onClick={() => console.log('List.Item clicked!')}
  143.       >
  144.         List.Item with onClick
  145.       </List.Item>
  146.     </SwipeAction>
  147.   </List>
  148. );
  150. ReactDOM.render(<SwipeActionExample />, mountNode);

SwipeAction滑动操作 - 图1

API

SwipeAction

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

Button

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