鸿蒙开发系列教程（二十三）--List 列表操作（2）-列表项侧滑

即用户可以通过向左侧滑列表的某一项，再点击删除按钮删除消息

ListItem的swipeAction属性可用于实现列表项的左右滑动功能

@Entry
@Component
struct MessageList {
@State messages: object[] = [
// 初始化消息列表数据
…
];

@Builder itemEnd(index: number) {
// 侧滑后尾端出现的组件
Button({ type: ButtonType.Circle }) {
Image($r(‘app.media.ic_public_delete_filled’))
.width(20)
.height(20)
}
.onClick(() => {
this.messages.splice(index, 1);
})
…
}

build() {
…
List() {
ForEach(this.messages, (item, index) => {
ListItem() {
…
}
.swipeAction({ end: this.itemEnd.bind(this, index) }) // 设置侧滑属性
}, item => item.id.toString())
}
…
}
}