现列表项ListItem滑动显示可置顶或删除

在使用列表List的应用中,可以滑动列表项ListItem显示可置顶或删除列表项,快速完成对列表项的操作。List垂直布局时滑动操作支持左滑和右滑。

HarmonyOS
2024-05-26 15:54:08
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
flyCloud00

1.实现自定义组件。本示例使用Row、text组件组装一个包含文本按钮的组件。在定义组件时,给定入参便于后续定位到被滑动的ListItem。本示例中,当滑动出菜单后,点击删除按钮可以删除当前ListItem,点击置顶可将子项置顶。

@Builder itemEnd(index:number) { 
  Row(){ 
    Text("置顶") 
        .padding(5) 
        .fontSize(16) 
        .backgroundColor('#808080') 
        .fontColor(Color.White) 
        .textAlign(TextAlign.Center) 
        .borderRadius(16) 
        .width(100) 
        .height('100%') 
        .onClick(() => { 
           this.itemIndexArr.splice(0,0,this.itemIndexArr[index]) 
           this.itemIndexArr.splice(index+1,1) 
        }) 
    Text("删除") 
        .padding(5) 
        .fontSize(16) 
        .backgroundColor('#FF0000') 
        .fontColor(Color.White) 
        .borderRadius(16) 
        .textAlign(TextAlign.Center) 
        .width(100) 
        .height('100%') 
        .onClick(() => { 
          this.itemIndexArr.splice(index,1) 
        }) 
  }.padding(4).justifyContent(FlexAlign.SpaceEvenly) 
}

2.使用ForEach循环渲染列表,并为ListItem设置swipeAction属性为上述自定义组件,设置属性时绑定入参

swipeAction支持设置不同的滑动方向:

  • start:List垂直布局时,向右滑动ListItem时在左侧显示的组件。本示例中未配置。
  • end:List垂直布局时,向左滑动ListItem时在右侧显示的组件。
build() { 
  Column() { 
    List({space:10}) { 
      ForEach(this.itemIndexArr,(item,index) =>{ 
        ListItem(){ 
          Text('' + item) 
            .width('100%') 
            .height(100) 
            .fontSize(16) 
            .margin({ top: 10 }) 
            .borderRadius(16) 
            .textAlign(TextAlign.Center) 
            .backgroundColor(Color.White) 
        }.swipeAction({ end:this.itemEnd.bind(this,index), edgeEffect: SwipeEdgeEffect.Spring}) 
      },item=>item) 
    } 
  } 
  .padding(10) 
  .backgroundColor(0xDCDCDC) 
  .width('100%') 
  .height('100%') 
}

完整代码

@Entry 
@Component 
struct Index { 
  @State itemIndexArr:number[] = [1,2,3,4,5,6,7,8,9,10] 
  
  @Builder itemEnd(index:number) { 
    Row(){ 
      Text("置顶") 
        .padding(5) 
        .fontSize(16) 
        .backgroundColor('#808080') 
        .fontColor(Color.White) 
        .textAlign(TextAlign.Center) 
        .borderRadius(16) 
        .width(100) 
        .height('100%') 
        .onClick(() => { 
           this.itemIndexArr.splice(0,0,this.itemIndexArr[index]) 
           this.itemIndexArr.splice(index+1,1) 
        }) 
      Text("删除") 
        .padding(5) 
        .fontSize(16) 
        .backgroundColor('#FF0000') 
        .fontColor(Color.White) 
        .borderRadius(16) 
        .textAlign(TextAlign.Center) 
        .width(100) 
        .height('100%') 
        .onClick(() => { 
          this.itemIndexArr.splice(index,1) 
        }) 
    }.padding(4).justifyContent(FlexAlign.SpaceEvenly) 
  } 
  
  build() { 
    Column() { 
      List({space:10}) { 
        ForEach(this.itemIndexArr,(item,index) =>{ 
          ListItem(){ 
            Text('' + item) 
              .width('100%') 
              .height(100) 
              .fontSize(16) 
              .margin({ top: 10 }) 
              .borderRadius(16) 
              .textAlign(TextAlign.Center) 
              .backgroundColor(Color.White) 
          }.swipeAction({ end:this.itemEnd.bind(this,index), edgeEffect: SwipeEdgeEffect.Spring}) 
        },item=>item) 
      } 
    } 
    .padding(10) 
    .backgroundColor(0xDCDCDC) 
    .width('100%') 
    .height('100%') 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 21:06:10
相关问题
列表滑动鸿蒙推荐ux设计
688浏览 • 1回复 待解决
键盘拉起时列表无法上下滑动
788浏览 • 1回复 待解决
侧滑删除功能的列表有哪些?
425浏览 • 1回复 待解决
长按滑动显示不同的内容
408浏览 • 1回复 待解决
如何获取UI组件的显示隐藏状态
686浏览 • 1回复 待解决
JS如开发一个横向拖动的表格
4770浏览 • 1回复 待解决
ListItem 组件渲染错误空白内容
376浏览 • 1回复 待解决