HarmonyOS 列表控件是否同时支持列表项的自由排序和左右侧滑?

HarmonyOS 列表控件是否同时支持列表项的自由排序和左右侧滑?

HarmonyOS
2024-10-08 11:16:30
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

列表拖动实现列表重新排序请参考此demo:

1.首先实现一个列表:

Column() {  
  ForEach(this.myCards, (item: string, index: number) => {  
     this.myCardItem(item, index)  
  }, (item: string) => item);  
}

2.绑定组合手势,实现拖动单个Item实现顺序变动:

.gesture(GestureGroup(GestureMode.Sequence,  
     LongPressGesture({ repeat: false })  
       .onAction((event) => {  
         console.log('===长按开始');  
         this.startEditMode(index);  
       })  
       .onActionCancel(() => {  
         console.log('===长按取消');  
         this.endEditMode();  
       })  
       .onActionEnd((event) => {  
         console.log('===长按结束');  
         this.endEditMode();  
       }),  
     PanGesture(this.panOption)  
       .onActionStart((event) => {  
         console.log('===拖动开始');  
         if (this.isEditMode) {  
           this.isMovedCard = true;  
         }  
       })  
       .onActionUpdate((event) => {  
         console.log('===拖动更新');  
         if (this.isEditMode) {  
           this.updatePosition(event.offsetY)  
         }  
       })  
       .onActionEnd(() => {  
         console.log('===拖动结束')  
         if (this.isEditMode) {  
           this.isMovedCard = false;  
           this.endEditMode();  
         }  
       })  
   ))

3.拖动开始和结束的相关代码:

startEditMode(index: number) {  
  if (this.isEditMode) {  
    return;  
  }  
  this.isEditMode = true;  
  this.indexSelected = index;  
  this.curPosStartY = this.itemHeight * this.indexSelected;  
  this.curPosY = this.curPosStartY;  
  // 1秒未滑动自动取消排序,因为不会回调"长按结束",也不会回调"滑动结束"。  
  setTimeout(() => {  
    if (!this.isMovedCard) {  
      this.endEditMode();  
    }  
  }, 1000)  
}  
endEditMode() {  
  this.isEditMode = false;  
  this.indexSelected = -1;  
}
分享
微博
QQ
微信
回复
2024-10-08 15:43:16
相关问题
HarmonyOS list 列表项交换
18浏览 • 1回复 待解决
拖动实现列表重新排序
1041浏览 • 1回复 待解决
删除功能列表有哪些?
783浏览 • 1回复 待解决
页面列表嵌套滚动,实现列表吸顶
1285浏览 • 1回复 待解决