0.1.3 • Published 3 years ago
@mas.io/mas-swiper-action v0.1.3
组件介绍
滑动单元格,相比较官方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>