SwipeAction
Sliding cell
Sample Code
copy
// API-DEMO page/component/swiper-action/swiper-action.json
{
"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"
}
}
copy
<!-- API-DEMO page/component/swiper-action/swiper-action.axml -->
<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>
copy
// API-DEMO page/component/swiper-action/swiper-action.js
Page({
data: {
swipeIndex: null,
list: [
{ right: [{ type: 'edit', text: ' Unfavorite ', bgColor: '#ccc', fColor: '#f00' }, { type: 'delete', text: ' Delete ', bgColor: '#0ff', fColor: '#333' }], content: ' Text & background color change at the same time Execute swipe deletion recovery ' },
{ right: [{ type: 'delete', text: ' Delete ' }], content: 'AAA' },
{ right: [{ type: 'edit', text: ' Unfavorite ' }, { type: 'delete', text: ' Delete ' }], content: 'BBB' },
{ right: [{ type: 'delete', text: ' Delete ' }], content: 'CCC' },
],
},
onRightItemClick(e) {
const { type } = e.detail;
my.confirm({
title: 'Tips',
content: `${e.index}-${e.extra}-${JSON.stringify(e.detail)}`,
confirmButtonText: 'Confirm',
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: 'Confirm => Execute swipe deletion recovery ',
});
e.done();
} else {
my.showToast({
content: 'Cancel => Swipe deletion status remains unchanged ',
});
}
},
});
},
onItemClick(e) {
my.alert({
content: `dada${e.index}`,
});
},
onSwipeStart(e) {
this.setData({
swipeIndex: e.index,
});
},
});
Attributes
Property | Description | Type | Default |
className | Customized class. | String | - |
right | Sliding option, at most two options. | Array[Object{type: edit/delete, text: string, fColor: 'Color value', bgColor: 'Color value'}] | [] |
onRightItemClick | Click sliding option. | ({index, detail, extra, done}) => void | Call done to fold swipeAction |
restore | Restore the component to its initial status. When there are multiple swipeAction components, to slide one of them, it is required to set the restore attribute of the others as true, which prevents multiple swipeAction becomes active on the same page. | Boolean | false |
onSwipeStart | Start sliding callback. | (e: Object) => void | - |
extra | Extra information, to get in the onRightItemClick callback. | any | - |