侧滑删除功能的列表有哪些?

侧滑删除功能的列表

HarmonyOS
2024-05-26 14:27:06
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
HearMe_cn

核心代码

@Entry 
@Component 
struct Page { 
  @State userSelect: Array<connection> = [ 
    new connection($r('app.media.icon'), '小明', '我还没出门'), 
    new connection($r('app.media.icon'), '李华', '早上下雨了')] 
  
  @Builder itemEnd(index: number) { 
    // 侧滑后尾端出现的组件 
    Button({ type: ButtonType.Circle }) { 
      Image($r('app.media.icon')) 
        .width(40) 
        .height(40) 
    }.height(60).backgroundColor(Color.White) 
    .onClick(() => { 
      this.userSelect.splice(index, 1); 
    }) 
  } 
  
  build() { 
    Row() { 
      Column() { 
        List() { 
          ForEach(this.userSelect, (item: connection,index:number) => { 
            ListItem() { 
              Row({ space: 10 }) { 
                Badge({ 
                  count: 1, 
                  position: BadgePosition.RightTop, 
                  style: { badgeSize: 20, badgeColor: '#FA2A2D' } 
                }){ 
                  Image(item.uImage).height(60).borderRadius(10) 
                } 
                Column() { 
                  Column() { 
                    Text(item.name).fontSize(22) 
                  }.width('100%').alignItems(HorizontalAlign.Start) 
  
                  Column() { 
                    Text(item.msg).fontColor('#D3D3D3') 
                  }.height(30).width('100%') 
                  .alignItems(HorizontalAlign.Start) 
                  .justifyContent(FlexAlign.End) 
                } 
                .width('70%') 
                // .backgroundColor(Color.Brown) 
              }.border({ width: { bottom: 1 }, color: '#C0C0C0' }) 
              .width('100%') 
              .height(80) 
              .padding({ left: 10 }) 
            }.swipeAction({ end: this.itemEnd(index) }) 
          }) 
        } 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

适配的版本信息

  • IDE:DevEco Studio 4.0.3.600
  • SDK:HarmoneyOS 4.0.10.11
分享
微博
QQ
微信
回复
2024-05-27 18:15:27
相关问题
【JS】如何实现左删除功能
1978浏览 • 1回复 待解决
证书锁定功能示例哪些
271浏览 • 1回复 待解决
实现二次退出应用
424浏览 • 1回复 待解决
PolarDB拥有哪些诊断和优化功能
1052浏览 • 1回复 待解决
PolarDB支持哪些备份功能
2004浏览 • 1回复 待解决
用户认证功能哪些
337浏览 • 1回复 待解决
MongoDB优势哪些
2615浏览 • 1回复 待解决
WaterFlow使用范例哪些
292浏览 • 1回复 待解决
PolarDB MySQL 参数哪些
1647浏览 • 1回复 待解决
哪些创建线程方式
850浏览 • 1回复 待解决
NoSQLMongoDB哪些优点?
2636浏览 • 1回复 待解决
关于逻辑删除问题吗?
1247浏览 • 1回复 待解决
Greenplum哪些通用处理方法?
2054浏览 • 1回复 待解决
数据持久化方式哪些
354浏览 • 1回复 待解决