A SwipeAction component is an extended function of a list. It is used to display hidden functional menus by swiping.
Property
Property | Type | Required | Default value | Description |
autoClose | boolean | No | false | Whether to automatically collapse when the button is tapped. |
disabled | boolean | No | false | Whether to disable the component. |
left | { text: string, type: 'default' | 'primary' | 'danger'; className: string } [] | No | - | Whether to expand the left operation area when you swipe right. |
right | { text: string, type: 'default' | 'primary' | 'danger'; className: string }[] | No | - | Whether to expand the right operation area when you swipe left. |
className | string | No | - | The class name. |
Event
Event name | Description | Type | Remarks |
onLeftButtonTap | Callback fired when the button on the left is tapped. |
| The nth button from left to right. |
onRightButtonTap | Callback fired when the button on the right is tapped. |
| The nth button from right to left. |
Style class
Class name | Description |
amd-swipe-action | The style of the entire component. |
amd-swipe-action-closeSwipe | The style applied to a closed component. |
amd-swipe-action-wrap | The style of the content wrapping the component. |
amd-swipe-action-left | The style of the button area on the left. |
amd-swipe-action-right | The style of the button area on the right. |
amd-swipe-action-btn | The button style. |
amd-swipe-action-btn-text | The button text style. |
amd-swipe-action-content | The style of the surface layer. |
amd-swipe-action-item | The content style of the surface layer. |
Code sample
Basic usage
The following shows an example of the code in the index.axml file:
<view class="demo">
<list radius="{{true}}" header="Single swipe action component (disappears when 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 when 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 components 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 shows an example of the code in the index.js file:
Page({
data: {
multiList: [{
left: [
{
type: 'default',
text: 'Add on',
}, {
type: 'primary',
text: 'Cancel favorite',
},
{
type: 'danger',
text: 'Delete',
}],
content: 'Only the left button + delete disappears',
autoClose: false,
speed: 100,
supportClear: true,
id: 1,
}, {
right: [{
type: 'default',
text: 'Add one',
}, {
type: 'primary',
text: 'Cancel favorite',
}, {
type: 'danger',
text: 'Delete',
}],
content: 'Only the right button + delete disappears',
autoClose: false,
speed: 20,
supportClear: true,
id: 2,
}, {
right: [{
type: 'danger',
text: 'Delete',
}],
left: [{
type: 'primary',
text: 'Cancel favorite',
}],
content: 'Left and right button each + delete disappears',
autoClose: true,
speed: 15,
supportClear: true,
id: 3,
}, {
right: [{
type: 'primary',
text: 'Cancel favorite',
}, {
type: 'danger',
text: 'Delete',
}],
left: [{
type: 'primary',
text: 'Cancel favorite',
}, {
type: 'danger',
text: 'Delete',
}],
content: 'Two left and right buttons each + delete does not disappear + does not automatically recover',
autoClose: false,
speed: 10,
supportClear: false,
id: 4,
}, {
right: [
{
type: 'default',
text: 'Do not disturb',
}, {
type: 'primary',
text: 'Cancel favorite',
}, {
type: 'danger',
text: 'Delete',
},
{
type: 'danger',
text: 'Clear',
},
],
left: [
{
type: 'default',
text: 'Do not disturb',
}, {
type: 'primary',
text: 'Favorite',
}, {
type: 'danger',
text: 'Delete',
}],
content: 'Three left and right buttons each + delete does not disappear + does not automatically recover',
autoClose: true,
speed: 1,
supportClear: false,
id: 5,
}],
singleListDelete: [{
right: [{
type: 'default',
text: 'Add one',
}, {
type: 'primary',
text: 'Cancel favorite',
}, {
type: 'danger',
text: 'Delete',
}],
content: 'Only the right button + delete disappears',
autoClose: false,
speed: 20,
supportClear: true,
id: 6,
}],
singleList: [{
right: [{
type: 'default',
text: 'Add one',
}, {
type: 'primary',
text: 'Cancel favorite',
}, {
type: 'danger',
text: 'Delete',
}],
content: 'Only the right button + delete disappears',
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: 'Kind tips',
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: 'Kind tips',
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}Succeed`,
});
});
}
},
});
},
onSingleRightItemClickDelete(btnIndex, btnText, btnType, extraInfo) {
const { supportClear } = extraInfo;
my.confirm({
title: 'Kind tips',
content: `Confirm${btnText}?`,
confirmButtonText: btnText,
cancelButtonText: 'Cancel',
success: (result) => {
if (!result.confirm) return;
if (btnType === 'danger' && supportClear) {
this.setData({
singleListDelete: [],
}, () => {
my.alert({
title: `${btnText}succeed`,
});
});
}
},
});
},
onSingleRightItemClick(btnIndex, btnText) {
my.confirm({
title: 'Kind tips',
content: `Confirm${btnText}?`,
confirmButtonText: btnText,
cancelButtonText: 'Cancel',
success: (result) => {
if (!result.confirm) return;
my.alert({
title: `${btnText}succeed`,
});
},
});
},
});The following shows an example of the code in the index.json file:
{
"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 instantiation method
The following shows an example of the code in the index.axml file:
<demo-block title="Component instance methods">
<swipe-action
data-index="{{index}}"
right="{{[{
type: 'default',
text: 'Add one',
}, {
type: 'primary',
text: 'Cancel favorite',
}, {
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 shows an example of the code in the index.js file:
Page({
getRef(ins) {
this.reset = ins.setItemPosition;
},
resetPosition() {
this.reset(0);
},
});The following shows an example of the code in the index.json file:
{
"defaultTitle": "Swipe-Action",
"usingComponents": {
"list-item": "antd-mini/es/List/ListItem/index",
"swipe-action": "antd-mini/es/SwipeAction/index",
"demo-block": "../../components/DemoBlock/index"
}
}