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

侧滑删除功能的列表

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

核心代码

@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】如何实现左删除功能
3402浏览 • 1回复 待解决
HarmonyOS 怎么禁止
74浏览 • 1回复 待解决
查看文件列表方式哪些
374浏览 • 1回复 待解决
实现二次退出应用
1792浏览 • 1回复 待解决
证书锁定功能示例哪些
719浏览 • 1回复 待解决
HarmonyOS 返回事件拦截与绑定
1126浏览 • 1回复 待解决
HarmonyOS webview返回上一页问题
687浏览 • 1回复 待解决
Text如何实现删除线功能
922浏览 • 1回复 待解决