This section describes SwipeAction, the slidable cell.
Property | Description | Type | Default value |
---|---|---|---|
className | Custom class | String | - |
right | Sliding options, no more than two. | Array[Object{type: edit /delete , text: string}] |
[] |
onRightItemClick | The click event of a swiped cell. | ({index, detail, extra, done}) => void | ({index, detail, extra, done}) => void |
restore | Restores the component to its initial state. If there are multiple swipe-action components, when you slide one of them, you need to set the restore value of other components to true . This avoids the situation where multiple swipe-actions care active on one page at the same time. |
Boolean | false |
onSwipeStart | Callback when sliding starts. | EventHandle | (e: Object) => void |
extra | Affiliated information, obtained in the onRightItemClick callback. |
String | - |
Sample code
{
"defaultTitle": "SwipeAction",
"usingComponents": {
"list": "mini-antui/es/list/index",
"list-item": "mini-antui/es/list/list-item/index",
"swipe-action": "mini-antui/es/swipe-action/index"
}
}
<view>
<list>
<view a:for="{{list}}" key="{{item.content}}">
<swipe-action
index="{{index}}"
restore="{{swipeIndex === null || swipeIndex !== index}}"
right="{{item.right}}"
onRightItemClick="onRightItemClick"
onSwipeStart="onSwipeStart"
extra="item{{index}}"
>
<list-item
arrow="horizontal"
index="{{index}}"
key="items-{{index}}"
onClick="onItemClick"
last="{{index === list.length - 1}}"
>
{{item.content}}
</list-item>
</swipe-action>
</view>
</list>
</view>
Page({
data: {
swipeIndex: null,
list: [
{ right: [{ type: 'delete', text: 'Delete' }], content: 'AAA' },
{ right: [{ type: 'edit', text: 'Remove from collection' }, { type: 'delete', text: 'Delete' }], content: 'BBB' },
{ right: [{ type: 'delete', text: 'Delete' }], content: 'CCC' },
],
},
onRightItemClick(e) {
const { type } = e.detail;
my.confirm({
title: 'Reminder',
content: `${e.index}-${e.extra}-${JSON.stringify(e.detail)}`,
confirmButtonText: 'OK',
cancelButtonText: 'Cancel'
success: (result) => {
const { list } = this.data;
if (result.confirm) {
if (type === 'delete') {
list.splice(this.data.swipeIndex, 1);
this.setData({
list: [...list],
});
}
my.showToast({
content: 'OK => Undo the result of sliding to delete',
});
e.done();
} else {
my.showToast({
content: 'Cancel => Keep the result of sliding to delete',
});
}
},
});
},
onItemClick(e) {
my.alert({
content: `dada${e.index}`,
});
},
onSwipeStart(e) {
this.setData({
swipeIndex: e.index,
});
},
});