@mas.io/mas-swiper-action

组件介绍

滑动单元格，相比较官方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>