All Products
Search
Document Center

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. }
  26. my.showToast({
  27. content: 'OK => Undo the result of sliding to delete',
  28. });
  29. e.done();
  30. } else {
  31. my.showToast({
  32. content: 'Cancel => Keep the result of sliding to delete',
  33. });
  34. }
  35. },
  36. });
  37. },
  38. onItemClick(e) {
  39. my.alert({
  40. content: `dada${e.index}`,
  41. });
  42. },
  43. onSwipeStart(e) {
  44. this.setData({
  45. swipeIndex: e.index,
  46. });
  47. },
  48. });