uniapp 微信小程序拖拽排序

### 实现 UniApp 微信小程序中的拖拽排序功能 在 UniApp 中开发微信小程序时，可以利用 `movable-view` 和 `cover-view` 组件来创建拖拽排序的效果。通过监听触摸事件以及更新视图的位置属性，能够实现用户友好的交互体验。 #### 关键技术点 - 使用 `movable-area` 定义可移动区域范围。 - 利用 `movable-view` 创建可被拖动的对象。 - 设置 `direction` 属性控制允许的方向。 - 结合 JavaScript 处理触摸事件逻辑，计算新位置并同步到界面上[^1]。 #### WXML 布局结构 定义一个容器用于放置所有待排序项，并为每一项设置唯一的标识符以便后续操作： ```html <view class="container"> <!-- 可移动区域 --> <movable-area id="sortable-list" class="list-container"> <!-- 单个列表项模板 --> <block v-for="(item, index) in items" :key="index"> <movable-view @touchstart="onTouchStart(index)" @touchmove="onTouchMove($event, index)" @touchend="onTouchEnd" direction="all" damping="50" friction="2" out-of-bounds> <cover-view>{{ item.text }}</cover-view> </movable-view> </block> </movable-area> </view> ``` #### JS 逻辑处理 初始化数据源数组，在方法中编写响应手势变化的函数，调整项目间的相对顺序： ```javascript export default { data() { return { items: [ { text: 'Item A' }, { text: 'Item B' }, { text: 'Item C' } ], activeIndex: null, startY: 0, currentY: 0 }; }, methods: { onTouchStart(index) { this.activeIndex = index; const query = uni.createSelectorQuery().in(this); query.select('#sortable-list').boundingClientRect(); query.exec((rect) => { if (rect && rect.length > 0){ let listRect = rect[0]; this.startY = e.touches[0].pageY - listRect.top; } }); }, onTouchMove(event, currentIndex) { this.currentY = event.changedTouches[0].pageY; // 计算当前元素相对于初始位置的变化量 let deltaY = this.currentY - this.startY; for(let i=0;i<this.items.length;i++){ if(i !== currentIndex){ let otherItemTop = /* 获取其他项目的顶部距离 */; if(deltaY >= otherItemTop){ // 当前正在接近上方相邻元素 // 进行交换... } else if(/* 接近下方 */){ // 同样执行相应的交换动作 } } } // 更新界面显示新的排列状态 this.$forceUpdate(); }, onTouchEnd(){ // 清除活动标记和其他清理工作 this.activeIndex = null; // 如果有需要保存最终排序结果，则在此处发起网络请求 } } } ``` 请注意上述代码片段仅作为概念验证用途，实际应用可能还需要考虑更多细节优化用户体验，比如动画过渡效果、边界条件判断等。