使用微信小程序?qū)崿F(xiàn)拖拽排序功能 示例代碼
剛開始學(xué)習(xí)微信小程序時(shí)，我一直以為實(shí)現(xiàn)拖拽排序功能是很困難的事情。然而，通過深入研究官方文檔和嘗試不同的方法，我終于成功地實(shí)現(xiàn)了這一功能。在本篇文章中，我將分享實(shí)現(xiàn)拖拽排序功能的具體代碼示例。
首先，在 wxml 文件中創(chuàng)建一個(gè)包含所有可排序項(xiàng)的列表。例如：
<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>
登錄后復(fù)制
在樣式文件 wxss 中，我們需要給可排序項(xiàng)添加一些樣式，使其可以拖拽。例如：
.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;
}
登錄后復(fù)制
在對(duì)應(yīng)的 js 文件中，我們需要定義一些事件處理函數(shù)來實(shí)現(xiàn)拖拽排序。首先，我們需要在頁面的 data 字段中定義一個(gè)排序列表 items 和一個(gè)正在拖拽中的索引值 draggingIndex：
Page({
data: {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
draggingIndex: -1
},
// ...
});
登錄后復(fù)制
接下來，我們需要實(shí)現(xiàn)拖拽開始、拖拽過程和拖拽結(jié)束的事件處理函數(shù)：
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
});
}
});
登錄后復(fù)制
在拖拽開始事件處理函數(shù) onDragStart 中，我們獲取當(dāng)前拖拽項(xiàng)的索引值，并將其保存到數(shù)據(jù)中的 draggingIndex 字段。
在拖拽過程事件處理函數(shù) onDragging 中，我們將拖拽項(xiàng)從原位置移除，并插入到當(dāng)前拖拽位置。最后，我們將修改后的列表保存到數(shù)據(jù)中，同時(shí)更新當(dāng)前拖拽項(xiàng)的索引值。
在拖拽結(jié)束事件處理函數(shù) onDragEnd 中，我們將數(shù)據(jù)中的 draggingIndex 字段重置為 -1，表示拖拽過程結(jié)束。
