日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

使用微信小程序實現拖拽排序功能 示例代碼

剛開始學習微信小程序時，我一直以為實現拖拽排序功能是很困難的事情。然而，通過深入研究官方文檔和嘗試不同的方法，我終于成功地實現了這一功能。在本篇文章中，我將分享實現拖拽排序功能的具體代碼示例。

首先，在 wxml 文件中創建一個包含所有可排序項的列表。例如：

<view class="sortable-list">
  <view wx:for="{{items}}" wx:key="unique-key" wx:for-item="item" wx:for-index="index" class="sortable-item"
    data-index="{{index}}" bindtouchstart="onDragStart" bindtouchmove="onDragging" bindtouchend="onDragEnd"
    bindtouchcancel="onDragEnd">
    {{item}}
  </view>
</view>

登錄后復制

在樣式文件 wxss 中，我們需要給可排序項添加一些樣式，使其可以拖拽。例如：

.sortable-item {
  padding: 10rpx;
  background-color: #F7F7F7;
  margin-bottom: 10rpx;
  border: 1rpx solid #CCCCCC;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sortable-item.dragging {
  opacity: 0.6;
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  z-index: 999;
  border-color: #33CCFF;
}

登錄后復制

在對應的 js 文件中，我們需要定義一些事件處理函數來實現拖拽排序。首先，我們需要在頁面的 data 字段中定義一個排序列表 items 和一個正在拖拽中的索引值 draggingIndex：

Page({
  data: {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
    draggingIndex: -1
  },
  // ...
});

登錄后復制

接下來，我們需要實現拖拽開始、拖拽過程和拖拽結束的事件處理函數：

Page({
  data: {
    // ...
  },
  onDragStart(e) {
    this.setData({
      draggingIndex: e.currentTarget.dataset.index
    });
  },
  onDragging(e) {
    const index = e.currentTarget.dataset.index;
    const draggingIndex = this.data.draggingIndex;

    if (draggingIndex !== -1) {
      const items = this.data.items;
      const [item] = items.splice(draggingIndex, 1);
      items.splice(index, 0, item);

      this.setData({
        items
      });
      this.setData({
        draggingIndex: index
      });
    }
  },
  onDragEnd(e) {
    this.setData({
      draggingIndex: -1
    });
  }
});

登錄后復制

在拖拽開始事件處理函數 onDragStart 中，我們獲取當前拖拽項的索引值，并將其保存到數據中的 draggingIndex 字段。

在拖拽過程事件處理函數 onDragging 中，我們將拖拽項從原位置移除，并插入到當前拖拽位置。最后，我們將修改后的列表保存到數據中，同時更新當前拖拽項的索引值。

在拖拽結束事件處理函數 onDragEnd 中，我們將數據中的 draggingIndex 字段重置為 -1，表示拖拽過程結束。