HarmonyOS 鸿蒙Next Api12列表拖动排序的极简实现

HarmonyOS 鸿蒙Next Api12列表拖动排序的极简实现
<markdown _ngcontent-ycl-c237="" class="markdownPreContainer">

我之前在Api11 的时候自己实现了列表的拖拽排序功能，费时又费力，但是好消息是Api12 中新添加了一个 OnMove()事件，所以，几行代码就可以实现无痛拖拽排序。。。

1.第一步，修改我们的 DataSource

只需要添加一个列表项调整位置的方法，其他不变

  moveDataWithoutNotify(from: number, to: number): void {
    let tmp = this.dataArray.splice(from, 1);
    this.dataArray.splice(to, 0, tmp[0])
    // 注意，此地不需要调用this.notifyDataReload();
    // 因为 onMove()已经为我们处理了
  }
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

2.第二步，添加 OnMove监听

LazyForEach()添加 OnMove监听。

   LazyForEach(this.ds, (item: SelectStockModel) => {
              ListItem() {
                SelectStockItemLayout({
                  m: item,
                  onItemClick: () => {
                  }
                })
              }
            },
              (it: SelectStockModel) =>
              JSON.stringify(it).onMove((from: number, to: number) => {
              // 此处调用 dataSource新添加的方法
              this.ds.moveDataWithoutNotify(from, to)
            })
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

在 onMove监听回调中，调用我们刚在第一步中添加的moveDataWithoutNotify方法即可。

恭喜，此时已经大功告成了。成果如下所示：

</markdown>

关于HarmonyOS 鸿蒙Next Api12列表拖动排序的极简实现的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。