拖动实现列表重新排序

拖动实现列表重新排序

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

本文主要介绍关于对列表通过手动拖动实现重新排序的功能实现。

使用的核心API

组合手势

核心代码解释

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; 
}

适配的版本信息

IDE版本:4.0.1.501

SDK版本:4.0.10.8

分享
微博
QQ
微信
回复
2024-05-27 20:05:31
相关问题
HarmonyOS Grid拖动排序和长按冲突
251浏览 • 1回复 待解决
mongodb实现特定值排序查询
2017浏览 • 1回复 待解决
HarmonyOS 如何实现拖动改变ListItem顺序
205浏览 • 1回复 待解决
页面和列表嵌套滚动,实现列表吸顶
1079浏览 • 1回复 待解决
DataAbilityHelper怎么排序?
3876浏览 • 1回复 待解决
HarmonyOS 怎么实现下拉分类列表
114浏览 • 1回复 待解决
如何实现列表页的单选效果
2324浏览 • 0回复 待解决
HarmonyOS 列表视频全屏播放实现
264浏览 • 1回复 待解决