如何设置滑动操作SwipeAction_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

列表的功能扩展，通过滑动操作来展示隐藏的功能菜单。

属性

属性	类型	必填	默认值	说明
autoClose	boolean	否	false	点击按钮是否会自动收起
disabled	boolean	否	false	是否禁止操作
left	{ text: string, type: 'default' \| 'primary' \| 'danger'; className: string } []	否	-	右滑漏出左侧操作区
right	{ text: string, type: 'default' \| 'primary' \| 'danger'; className: string }[]	否	-	左滑漏出右侧操作区
className	string	否	-	类名

事件

事件名	说明	类型	补充
onLeftButtonTap	点击左侧按钮，触发回调	`(index: number, text: string, type: string, extraInfo?: unknown, dateSet: Record<string, any>) => void`	从左往右起，第 n 个按钮
onRightButtonTap	点击右侧按钮，触发回调	`(index: number, text: string, type: string, extraInfo?: unknown, dateSet: Record<string, any>) => void`	从右往左起，第 n 个按钮

样式类

类名	说明
amd-swipe-action	整体样式
amd-swipe-action-closeSwipe	整体样式
amd-swipe-action-wrap	整体内容样式
amd-swipe-action-left	左侧按钮区域样式
amd-swipe-action-right	右侧按钮区域样式
amd-swipe-action-btn	按钮样式
amd-swipe-action-btn-text	按钮文字样式
amd-swipe-action-content	表层区域样式
amd-swipe-action-item	表层区域内容样式

代码示例

基本使用

index.axml 的代码示例如下：

<view class="demo">
  <list radius="{{true}}" header="单个滑动操作组件（删除时消失）">
    <swipe-action
        a:for="{{singleListDelete}}" 
        a:key="id"
        data-index="{{index}}"
        autoClose="{{item.autoClose}}" 
        right="{{item.right}}" 
        speed="{{item.speed}}"
        extraInfo="{{{sequence:index+1,supportClear:item.supportClear}}}"
        onRightButtonTap="onSingleRightItemClickDelete" 
        >
        <list-item 
          arrow="right" 
          data-index="{{index}}"
          data-content="{{item.content}}"
          onTap="onItemClick">
          {{item.content}}
        </list-item>
    </swipe-action>
  </list>  
  <list radius="{{true}}" header="单个滑动操作组件（删除时消失）">
    <swipe-action
        a:for="{{singleList}}" 
        a:key="id"
        data-index="{{index}}"
        autoClose="{{item.autoClose}}" 
        right="{{item.right}}" 
        speed="{{item.speed}}"
        extraInfo="{{{sequence:index+1,supportClear:item.supportClear}}}"
        onRightButtonTap="onSingleRightItemClick" 
        >
        <list-item 
          arrow="right" 
          data-index="{{index}}"
          data-content="{{item.content}}"
          onTap="onItemClick">
           {{item.content}}
        </list-item>
    </swipe-action>
  </list>
  <list radius="{{true}}" header="滑动操作组件列表">
    <swipe-action 
      a:for="{{multiList}}" 
      a:key="id"
      data-index="{{index}}"
      autoClose="{{item.autoClose}}" 
      right="{{item.right}}" 
      left="{{item.left}}" 
      speed="{{item.speed}}"
      extraInfo="{{{sequence:index+1,supportClear:item.supportClear}}}"
      onRightButtonTap="onMultiRightItemClick" 
      onLeftButtonTap="onMultiLeftItemClick">
      <list-item 
        arrow="right" 
        data-index="{{index}}" 
        data-content="{{item.content}}"
        onTap="onItemClick">
          {{item.content}}
      </list-item>
    </swipe-action>
  </list>
</view>

index.js 的代码示例如下：

Page({
  data: {
    multiList: [{
      left: [
        {
          type: 'default',
          text: '新增一个',
        }, {
          type: 'primary',
          text: '取消收藏',
        },
        {
          type: 'danger',
          text: '删除',
        }],
      content: '仅左侧按钮+删除消失',
      autoClose: false,
      speed: 100,
      supportClear: true,
      id: 1,
    }, {
      right: [{
        type: 'default',
        text: '新增一个',
      }, {
        type: 'primary',
        text: '取消收藏',
      }, {
        type: 'danger',
        text: '删除',
      }],
      content: '仅右侧按钮+删除消失',
      autoClose: false,
      speed: 20,
      supportClear: true,
      id: 2,
    }, {
      right: [{
        type: 'danger',
        text: '删除',
      }],
      left: [{
        type: 'primary',
        text: '取消收藏',
      }],
      content: '左右按钮各一个+删除消失',
      autoClose: true,
      speed: 15,
      supportClear: true,
      id: 3,
    }, {
      right: [{
        type: 'primary',
        text: '收藏取消',
      }, {
        type: 'danger',
        text: '删除',
      }],
      left: [{
        type: 'primary',
        text: '收藏取消',
      }, {
        type: 'danger',
        text: '删除',
      }],
      content: '左右按钮各二个+删除不消失+不自动恢复',
      autoClose: false,
      speed: 10,
      supportClear: false,
      id: 4,
    }, {
      right: [
        {
          type: 'default',
          text: '免打扰',
        }, {
          type: 'primary',
          text: '取消关注',
        }, {
          type: 'danger',
          text: '删除',
        },
        {
          type: 'danger',
          text: '清空',
        },
      ],
      left: [
        {
          type: 'default',
          text: '免打扰',
        }, {
          type: 'primary',
          text: '收藏',
        }, {
          type: 'danger',
          text: '删除',
        }],
      content: '左右按钮各三个+删除不消失+自动恢复',
      autoClose: true,
      speed: 1,
      supportClear: false,
      id: 5,
    }],
    singleListDelete: [{
      right: [{
        type: 'default',
        text: '新增一个',
      }, {
        type: 'primary',
        text: '取消收藏',
      }, {
        type: 'danger',
        text: '删除',
      }],
      content: '仅右侧按钮+删除消失',
      autoClose: false,
      speed: 20,
      supportClear: true,
      id: 6,
    }],
    singleList: [{
      right: [{
        type: 'default',
        text: '新增一个',
      }, {
        type: 'primary',
        text: '取消收藏',
      }, {
        type: 'danger',
        text: '删除',
      }],
      content: '仅右侧按钮+删除不消失',
      autoClose: false,
      speed: 20,
      supportClear: true,
      id: 7,
    }],
  },
  onItemClick(e) {
    my.alert({
      content: `dada__${e.currentTarget.dataset.content}`,
    });
  },
  onMultiRightItemClick(btnIndex, btnText, btnType, extraInfo) {
    const { sequence, supportClear } = extraInfo;
    my.confirm({
      title: '温馨提示',
      content: `确认${btnText}?`,
      confirmButtonText: btnText,
      cancelButtonText: '取消',
      success: (result) => {
        if (!result.confirm) return;
        if (btnType === 'danger' && sequence && supportClear) {
          const newList = this.data.multiList.filter((item, index) => index !== sequence - 1);
          this.setData({
            multiList: newList,
          });
        }
      },
    });
  },
  onMultiLeftItemClick(btnIndex, btnText, btnType, extraInfo) {
    const { sequence, supportClear } = extraInfo;
    my.confirm({
      title: '温馨提示',
      content: `确认${btnText}?`,
      confirmButtonText: btnText,
      cancelButtonText: '取消',
      success: (result) => {
        if (!result.confirm) return;
        if (btnType === 'danger' && sequence && supportClear) {
          const newList = this.data.multiList.filter((item, index) => index !== sequence - 1);
          this.setData({
            multiList: newList,
          }, () => {
            my.alert({
              title: `${btnText}成功`,
            });
          });
        }
      },
    });
  },
  onSingleRightItemClickDelete(btnIndex, btnText, btnType, extraInfo) {
    const { supportClear } = extraInfo;
    my.confirm({
      title: '温馨提示',
      content: `确认${btnText}?`,
      confirmButtonText: btnText,
      cancelButtonText: '取消',
      success: (result) => {
        if (!result.confirm) return;
        if (btnType === 'danger' && supportClear) {
          this.setData({
            singleListDelete: [],
          }, () => {
            my.alert({
              title: `${btnText}成功`,
            });
          });
        }
      },
    });
  },
  onSingleRightItemClick(btnIndex, btnText) {
    my.confirm({
      title: '温馨提示',
      content: `确认${btnText}?`,
      confirmButtonText: btnText,
      cancelButtonText: '取消',
      success: (result) => {
        if (!result.confirm) return;
        my.alert({
          title: `${btnText}成功`,
        });
      },
    });
  },
});

index.json 的代码示例如下：

{
  "defaultTitle": "Swipe-Action",
  "usingComponents": {
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "swipe-action": "antd-mini/es/SwipeAction/index"
  }
}

组件实例方法

index.axml 的代码示例如下：

<demo-block title="组件实例方法">
  <swipe-action
    data-index="{{index}}"
    right="{{[{
        type: 'default',
        text: '新增一个',
      }, {
        type: 'primary',
        text: '取消收藏',
      }, {
        type: 'danger',
        text: '删除',
      }]}}" 
    onRightButtonTap="onSingleRightItemClickDelete" 
    onGetRef="getRef"
    >
    <list-item 
      arrow="right" 
      data-index="{{index}}"
      onTap="onItemClick">
      组件实例方法
    </list-item>
  </swipe-action>
  <button onTap="resetPosition" style="margin-top:24rpx;">
    控制关闭
  </button>
</demo-block>

index.js 的代码示例如下：

Page({
  getRef(ins) {
    this.reset = ins.setItemPosition;
  },
  resetPosition() {
    this.reset(0);
  },
});

index.json 的代码示例如下：

{
    "defaultTitle": "Swipe-Action",
    "usingComponents": {
      "list-item": "antd-mini/es/List/ListItem/index",
      "swipe-action": "antd-mini/es/SwipeAction/index",
      "demo-block": "../../components/DemoBlock/index"
    }
  }