SwipeAction

    // API-DEMO page/component/swiper-action/swiper-action.json
    {
      "defaultTitle": "SwipeAction",
      "usingComponents": {
        "list": "mini-antui/es/list/index",
        "list-item": "mini-antui/es/list/list-item/index",
        "swipe-action": "mini-antui/es/swipe-action/index"
      }
    }

    <!-- API-DEMO page/component/swiper-action/swiper-action.axml -->
    <view>
      <list>
        <view a:for="{{list}}" key="{{item.content}}">
          <swipe-action
            index="{{index}}"
            restore="{{swipeIndex === null || swipeIndex !== index}}"
            right="{{item.right}}"
            onRightItemClick="onRightItemClick"
            onSwipeStart="onSwipeStart"
            extra="item{{index}}"
          >
            <list-item
              arrow="horizontal"
              index="{{index}}"
              key="items-{{index}}"
              onClick="onItemClick"
              last="{{index === list.length - 1}}"
            >
              {{item.content}}
            </list-item>
          </swipe-action>
        </view>
      </list>
    </view>

    // API-DEMO page/component/swiper-action/swiper-action.js
    Page({
      data: {
        swipeIndex: null,
        list: [
          { right: [{ type: 'edit', text: ' Unfavorite ', bgColor: '#ccc', fColor: '#f00' }, { type: 'delete', text: ' Delete ', bgColor: '#0ff', fColor: '#333' }], content: ' Text & background color change at the same time Execute swipe deletion recovery ' },
          { right: [{ type: 'delete', text: ' Delete ' }], content: 'AAA' },
          { right: [{ type: 'edit', text: ' Unfavorite ' }, { type: 'delete', text: ' Delete ' }], content: 'BBB' },
          { right: [{ type: 'delete', text: ' Delete ' }], content: 'CCC' },
        ],
      },
      onRightItemClick(e) {
        const { type } = e.detail;
        my.confirm({
          title: 'Tips',
          content: `${e.index}-${e.extra}-${JSON.stringify(e.detail)}`,
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          success: (result) => {
            const { list } = this.data;
            if (result.confirm) {
              if (type === 'delete') {
                list.splice(this.data.swipeIndex, 1);
                this.setData({
                  list: [...list],
                });
              }
    
              my.showToast({
                content: 'Confirm => Execute swipe deletion recovery ',
              });
              e.done();
            } else {
              my.showToast({
                content: 'Cancel => Swipe deletion status remains unchanged ',
              });
            }
          },
        });
      },
      onItemClick(e) {
        my.alert({
          content: `dada${e.index}`,
        });
      },
      onSwipeStart(e) {
        this.setData({
          swipeIndex: e.index,
        });
      },
    });