使用antd-mini滑動操作組件SwipeAction-移動開發平台 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"
    }
  }