合作咨询
我们的专家服务团队将竭诚为您提供专业的合作咨询服务
大Eason怎么在item上设置左滑删除,收藏等功能

QQ丅QQ使用swiperAction,可以看下这个demo,左滑右滑效果
@Entry
@Component
struct ListItemExample2 {
@State arr: number[] = [0, 1, 2, 3, 4]
@State enterEndDeleteAreaString: string = "not enterEndDeleteArea"
@State exitEndDeleteAreaString: string = "not exitEndDeleteArea"
@Builder
itemStart() {
Row() {
Button("Set").margin("4vp")
}.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
}
@Builder
itemEnd() {
Row() {
Button("Delete").margin("4vp")
}.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
}
build() {
Column() {
List({ space: 10 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("item" + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
.transition({ type: TransitionType.Delete, opacity: 0 })
.swipeAction({
edgeEffect: SwipeEdgeEffect.None,
end: {
builder: () => {
this.itemEnd()
},
onAction: () => {
animateTo({ duration: 1000 }, () => {
let index = this.arr.indexOf(item)
this.arr.splice(index, 1)
})
},
actionAreaDistance: 56,
}
})
}, (item: string) => item)
}
Text(this.enterEndDeleteAreaString).fontSize(20)
Text(this.exitEndDeleteAreaString).fontSize(20)
}
.padding(10)
.backgroundColor(0xDCDCDC)
.width('100%')
.height('100%')
}
}我要提问题
HarmonyOS List如何实现item的吸顶 (API12+)
HarmonyOS如何手动实现左滑删除功能
HarmonyOS 如何在LightItem组件中实现删除功能,并确保删除操作在父组件中执行 (API12)
HarmonyOS ListItemGroup中item单独刷新 (API12+)
HarmonyOS 如何实现左滑ListItem,出现删除按钮的效果?(API12+)
HarmonyOS 如何删除分组List中的列表项 (API12+)
HarmonyOS 如何监听ListItem从左向右滑的事件 (API12+)
HarmonyOS 在应用内部,怎么禁用系统自带的右滑返回上一页面?(API12+)
合作咨询
我们的专家服务团队将竭诚为您提供专业的合作咨询服务
解决方案
精准高效的一站式服务支持,助力开发者商业成功