拖动实现列表重新排序

拖动实现列表重新排序

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
相关问题
mongodb实现特定值排序查询
1082浏览 • 1回复 待解决
页面和列表嵌套滚动,实现列表吸顶
524浏览 • 1回复 待解决
DataAbilityHelper怎么排序?
2890浏览 • 1回复 待解决
如何实现列表页的单选效果
1084浏览 • 0回复 待解决
Image长按拖动如何关闭
764浏览 • 1回复 待解决
编写一个页面,实现不规则列表
387浏览 • 1回复 待解决
如何实现分组列表的吸顶/吸底效果
955浏览 • 1回复 待解决
mysql 分组去重排序问题?
927浏览 • 1回复 待解决
MySQL 如何按照地理位置排序?
1632浏览 • 1回复 待解决
Mysql表的数据如何打乱排序
1154浏览 • 1回复 待解决
分组列表实践(嵌套列表
511浏览 • 1回复 待解决
如何操作canvas重新绘制
417浏览 • 1回复 待解决
页面上下拖动时怎么隐藏键盘
544浏览 • 1回复 待解决
mysql 中对于中文+数字的排序
2153浏览 • 1回复 待解决