Extends list items with a hidden action menu revealed by swiping.
Properties
|
Property |
Type |
Required |
Default value |
Description |
|
autoClose |
boolean |
No |
false |
Automatically collapses the action menu when a button is tapped. |
|
disabled |
boolean |
No |
false |
Disables the swipe action. |
|
left |
{ text: string, type: 'default' | 'primary' | 'danger'; className: string } [] |
No |
- |
Buttons displayed in the left action area, revealed by swiping right. |
|
right |
{ text: string, type: 'default' | 'primary' | 'danger'; className: string }[] |
No |
- |
Buttons displayed in the right action area, revealed by swiping left. |
|
className |
string |
No |
- |
Custom CSS class name. |
Events
|
Event name |
Description |
Type |
Notes |
|
onLeftButtonTap |
Triggered when a left-side button is tapped. |
|
The nth button, counting from left to right. |
|
onRightButtonTap |
Triggered when a right-side button is tapped. |
|
The nth button, counting from right to left. |
Style classes
|
Class name |
Description |
|
amd-swipe-action |
The overall style. |
|
amd-swipe-action-closeSwipe |
The overall style. |
|
amd-swipe-action-wrap |
The style for the overall content. |
|
amd-swipe-action-left |
The style for the left button area. |
|
amd-swipe-action-right |
The style for the right button area. |
|
amd-swipe-action-btn |
The button style. |
|
amd-swipe-action-btn-text |
The style for the button text. |
|
amd-swipe-action-content |
The style for the top layer area. |
|
amd-swipe-action-item |
The style for the content in the top layer area. |
Code examples
Basic usage
The following code shows an example of index.axml:
<view class="demo">
<list radius="{{true}}" header="Single swipe action component (disappears on delete)">
<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="Single swipe action component (disappears on delete)">
<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 component list">
<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>The following code shows an example of index.js:
Page({
data: {
multiList: [{
left: [
{
type: 'default',
text: 'Add one',
}, {
type: 'primary',
text: 'Remove from favorites',
},
{
type: 'danger',
text: 'Delete',
}],
content: 'Left buttons only, disappears on delete',
autoClose: false,
speed: 100,
supportClear: true,
id: 1,
}, {
right: [{
type: 'default',
text: 'Add one',
}, {
type: 'primary',
text: 'Remove from favorites',
}, {
type: 'danger',
text: 'Delete',
}],
content: 'Right buttons only, disappears on delete',
autoClose: false,
speed: 20,
supportClear: true,
id: 2,
}, {
right: [{
type: 'danger',
text: 'Delete',
}],
left: [{
type: 'primary',
text: 'Remove from favorites',
}],
content: 'One button on each side, disappears on delete',
autoClose: true,
speed: 15,
supportClear: true,
id: 3,
}, {
right: [{
type: 'primary',
text: 'Remove from favorites',
}, {
type: 'danger',
text: 'Delete',
}],
left: [{
type: 'primary',
text: 'Remove from favorites',
}, {
type: 'danger',
text: 'Delete',
}],
content: 'Two buttons on each side, does not disappear on delete, does not auto-reset',
autoClose: false,
speed: 10,
supportClear: false,
id: 4,
}, {
right: [
{
type: 'default',
text: 'Do not disturb',
}, {
type: 'primary',
text: 'Unfollow',
}, {
type: 'danger',
text: 'Delete',
},
{
type: 'danger',
text: 'Delete',
},
],
left: [
{
type: 'default',
text: 'Do not disturb',
}, {
type: 'primary',
text: 'Favorite',
}, {
type: 'danger',
text: 'Delete',
}],
content: 'Three buttons on each side, does not disappear on delete, auto-resets',
autoClose: true,
speed: 1,
supportClear: false,
id: 5,
}],
singleListDelete: [{
right: [{
type: 'default',
text: 'Add one',
}, {
type: 'primary',
text: 'Remove from favorites',
}, {
type: 'danger',
text: 'Delete',
}],
content: 'Right buttons only, disappears on delete',
autoClose: false,
speed: 20,
supportClear: true,
id: 6,
}],
singleList: [{
right: [{
type: 'default',
text: 'Add one',
}, {
type: 'primary',
text: 'Remove from favorites',
}, {
type: 'danger',
text: 'Delete',
}],
content: 'Right buttons only, does not disappear on delete',
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: 'Note',
content: `Confirm ${btnText}?`,
confirmButtonText: btnText,
cancelButtonText: 'Cancel',
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: 'Note',
content: `Confirm ${btnText}?`,
confirmButtonText: btnText,
cancelButtonText: 'Cancel',
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} successful`,
});
});
}
},
});
},
onSingleRightItemClickDelete(btnIndex, btnText, btnType, extraInfo) {
const { supportClear } = extraInfo;
my.confirm({
title: 'Note',
content: `Confirm ${btnText}?`,
confirmButtonText: btnText,
cancelButtonText: 'Cancel',
success: (result) => {
if (!result.confirm) return;
if (btnType === 'danger' && supportClear) {
this.setData({
singleListDelete: [],
}, () => {
my.alert({
title: `${btnText} successful`,
});
});
}
},
});
},
onSingleRightItemClick(btnIndex, btnText) {
my.confirm({
title: 'Note',
content: `Confirm ${btnText}?`,
confirmButtonText: btnText,
cancelButtonText: 'Cancel',
success: (result) => {
if (!result.confirm) return;
my.alert({
title: `${btnText} successful`,
});
},
});
},
});The following code shows an example of 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"
}
}
Component instance methods
The following code shows an example of index.axml:
<demo-block title="Component instance methods">
<swipe-action
data-index="{{index}}"
right="{{[{
type: 'default',
text: 'Add one',
}, {
type: 'primary',
text: 'Remove from favorites',
}, {
type: 'danger',
text: 'Delete',
}]}}"
onRightButtonTap="onSingleRightItemClickDelete"
onGetRef="getRef"
>
<list-item
arrow="right"
data-index="{{index}}"
onTap="onItemClick">
Component instance methods
</list-item>
</swipe-action>
<button onTap="resetPosition" style="margin-top:24rpx;">
Control close
</button>
</demo-block>The following code shows an example of index.js:
Page({
getRef(ins) {
this.reset = ins.setItemPosition;
},
resetPosition() {
this.reset(0);
},
});The following code shows an example of 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"
}
}