All Products
Search

This Product

    Swipe action

    Document Center
    Product Details

    Swipe action

    Last Updated: Apr 07, 2021

    This section describes SwipeAction, the slidable cell.

    Property Description Type Default value
    className Custom class String -
    right Sliding options, no more than two. Array[Object{type: edit/delete, text: string}] []
    onRightItemClick The click event of a swiped cell. ({index, detail, extra, done}) => void ({index, detail, extra, done}) => void
    restore Restores the component to its initial state. If there are multiple swipe-action components, when you slide one of them, you need to set the restore value of other components to true. This avoids the situation where multiple swipe-actions care active on one page at the same time. Boolean false
    onSwipeStart Callback when sliding starts. EventHandle (e: Object) => void
    extra Affiliated information, obtained in the onRightItemClick callback. String -

    Sample code

    1. {
    2.   "defaultTitle": "SwipeAction",
    3.   "usingComponents": {
    4.     "list": "mini-antui/es/list/index",
    5.     "list-item": "mini-antui/es/list/list-item/index",
    6.     "swipe-action": "mini-antui/es/swipe-action/index"
    7.   }
    8. }
    1. <view>
    2.   <list>
    3.     <view a:for="{{list}}" key="{{item.content}}">
    4.       <swipe-action
    5.         index="{{index}}"
    6.         restore="{{swipeIndex === null || swipeIndex !== index}}"
    7.         right="{{item.right}}"
    8.         onRightItemClick="onRightItemClick"
    9.         onSwipeStart="onSwipeStart"
    10.         extra="item{{index}}"
    11.       >
    12.         <list-item
    13.           arrow="horizontal"
    14.           index="{{index}}"
    15.           key="items-{{index}}"
    16.           onClick="onItemClick"
    17.           last="{{index === list.length - 1}}"
    18.         >
    19.           {{item.content}}
    20.         </list-item>
    21.       </swipe-action>
    22.     </view>
    23.   </list>
    24. </view>
    1. Page({
    2.   data: {
    3.     swipeIndex: null,
    4.     list: [
    5.       { right: [{ type: 'delete', text: 'Delete' }], content: 'AAA' },
    6.       { right: [{ type: 'edit', text: 'Remove from collection' }, { type: 'delete', text: 'Delete' }], content: 'BBB' },
    7.       { right: [{ type: 'delete', text: 'Delete' }], content: 'CCC' },
    8.     ],
    9.   },
    10.   onRightItemClick(e) {
    11.     const { type } = e.detail;
    12.     my.confirm({
    13.       title: 'Reminder',
    14.       content: `${e.index}-${e.extra}-${JSON.stringify(e.detail)}`,
    15.       confirmButtonText: 'OK',
    16.       cancelButtonText: 'Cancel'
    17.       success: (result) => {
    18.         const { list } = this.data;
    19.         if (result.confirm) {
    20.           if (type === 'delete') {
    21.             list.splice(this.data.swipeIndex, 1);
    22.             this.setData({
    23.               list: [...list],
    24.             });
    25.           }
    27.           my.showToast({
    28.             content: 'OK => Undo the result of sliding to delete',
    29.           });
    30.           e.done();
    31.         } else {
    32.           my.showToast({
    33.             content: 'Cancel => Keep the result of sliding to delete',
    34.           });
    35.         }
    36.       },
    37.     });
    38.   },
    39.   onItemClick(e) {
    40.     my.alert({
    41.       content: `dada${e.index}`,
    42.     });
    43.   },
    44.   onSwipeStart(e) {
    45.     this.setData({
    46.       swipeIndex: e.index,
    47.     });
    48.   },
    49. });