组件介绍

滑动单元格，相比较官方swiperAction操作更流畅，不依赖list-item

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 | --- | --- | --- | --- | --- | --- | useTransition | 选填 | Bool | 是否使用transition控制显隐动画(默认为false，移动位置跟随手指，若影响性能，可以启用useTransition为true，以滑动夹角大于30度为界判定显隐状态，可用duration参数控制动画时长) | false | | duration | 选填 | Number | useTransition时为总动画时长，否则根据自动恢复距离等比例计算 | 200 | | actions | 必填 | Array | 右侧按钮，支持type（delete、edit、other）属性设置自带样式 ，或传入style参数（优先级更高）| - | [{ name: '删除', type: 'delete' }, { name: '收藏', style: 'background-color:yellow;' }] | className | 选填 | String | - | - | - | restore | 选填 | String | 还原组件到初始状态 | - | - | restoreAfterTap | 选填 | Bool | 点击是否自动恢复 | true | - | restoreAfterTapAction | 选填 | Bool | 点击操作按钮是否自动恢复 | true | - | disableTapWhenShowAction | 选填 | Bool | 是否禁用滑出状态的点击事件 | true | - | info | 选填 | any | 附属信息，传入onTap | true | - | onTap | 选填 | Function | 点击回调 | (info,showAction)=>{} | - | onTapAction | 必填 | Function | 操作按钮回调 | ({ item, index, info })=>{} | - | onSwiperStart | 选填 | Function | 开始滑动回调 | (item,e)=>{} | - | rateChange | 选填 | Number | 滑动比例超过多少自动收起或展开 | 0.3 | - |

插槽

default：内容

在小程序中使用

{
  "usingComponents": {
    "mas-swiper-action": "@alipay/mas-swiper-action/es/index"
  }
}

Page({
  data: {
    data: [
      {
        title: '这是一个滑动按钮',
        actions: [
          { name: '删除', type: 'delete' },
          { name: '收藏', style: 'background-color:yellow;' },
        ],
      },
      {
        title: '这是另一个滑动按钮',
        actions: [
          { name: '删除', type: 'delete' },
          { name: '收藏', type: 'other' },
          { name: '编辑', type: 'edit' },
        ],
      },
      {
        title: '这是一个会互斥展开的滑动按钮',
        actions: [
          { name: '删除', type: 'delete' },
          { name: '收藏', type: 'other' },
          { name: '编辑', type: 'edit' },
        ],
      },
    ],
    actionIndex: 0,
  },
  onLoad() {},
  onTap(info) {
    const { index } = info;
    my.alert({ content: `您点击了第${index}条item` });
  },
  onTapAction(e) {
    my.alert({ content: `您点击了action，信息：${JSON.stringify(e)}` });
  },
  onSwiperStart(info) {
    const { index } = info;
    this.setData({ actionIndex: index });
  },
});

在 page.axml 中引用组件

<!-- 页面使用方式 -->
  <swiper-action
    onSwiperStart="onSwiperStart"
    a:for="{{data}}" 
    restore="{{actionIndex!==index&&index===2}}"
    info="{{{item,index}}}"
    actions="{{item.actions}}" 
    onTap="onTap" 
    onTapAction="onTapAction">
     <view class="item">{{item.title}}</view>
  </swiper-action>