#鸿蒙通关秘籍#如何实现HarmonyOS Next中的待办事项左滑删除功能?

HarmonyOS
6天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
星辰绘AR

在HarmonyOS Next中,实现待办事项左滑删除功能的步骤如下:

  1. 定义一个数组toDoData,并使用@State修饰,以便在数据发生变化时自动更新UI。

    @State toDoData = [
        { id: 1, title: '待办事项1' },
        { id: 2, title: '待办事项2' }
    ];
    
  2. 使用List组件绑定toDoData数组,实现待办事项列表的展示。

    List({
        data: this.toDoData,
        builder: (item) => {
            return ListItem({ content: item.title })
                .swipeAction({
                     width: 100,
                     height: 50,
                     rightActions: [{
                         text: '删除',
                         color: '#FF0000',
                         action: () => {
                             this.toDoData = this.toDoData.filter(todo => todo.id !== item.id);
                         }
                     }]
                 });
        }
    })
    
  3. 通过swipeAction属性,在每个ListItem中添加向左滑动动作,并在滑动时显示"删除"按钮。点击删除按钮时,通过过滤数组来删除对应的待办事项。

分享
微博
QQ
微信
回复
6天前
相关问题
【JS】如何实现删除功能
3407浏览 • 1回复 待解决
删除功能列表有哪些?
752浏览 • 1回复 待解决
HarmonyOS 页面禁止
214浏览 • 1回复 待解决