更新记录

1.0.2（2022-12-02） 下载此版本

深度监听数组

1.0.1（2020-12-10） 下载此版本

1.0.1 兼容了h5

1.0.0（2020-12-10） 下载此版本

1.0.0 完成测试版

平台兼容性

uni-app(4.25)

拖拽交换排序组件

一个基于 uni-app 的拖拽排序组件，支持触摸拖拽、动画效果和流畅的滑动体验。

✨ 特性

• 🎯 支持触摸拖拽排序
• 🎨 流畅的动画效果
• 📱 兼容 H5 和小程序环境
• 🛡️ 完善的错误处理和边界检查
• ⚡ 性能优化，防止重复触发
• 🎭 实时悬浮预览效果

📦 安装使用

1. 引入组件

<template>
  <view>
    <prettyChange :list="list" @change="handleChange"></prettyChange>
  </view>
</template>

<script>
import prettyChange from '@/components/pretty-exchange/pretty-exchange.vue'

export default {
  components: {
    prettyChange
  },
  data() {
    return {
      list: [
        {
          name: '小张',
          src: 'https://example.com/avatar1.jpg',
          color: '#E5716A'
        },
        {
          name: '小王',
          src: 'https://example.com/avatar2.jpg',
          color: '#78DCAE'
        }
      ]
    }
  },
  methods: {
    handleChange(newList) {
      console.log('排序后的列表:', newList)
      this.list = newList
    }
  }
}
</script>

📝 API

Props

数据格式

{
  name: String,    // 显示名称
  src: String,     // 头像图片地址
  color: String    // 背景颜色
}

Events

🔧 最近更新 (v2.0)

🐛 Bug修复

1. H5环境兼容性问题

   • 修复了 stops() 方法中 e.mp.changedTouches 在H5环境下不存在的问题
   • 添加了条件编译，兼容H5和小程序环境

2. 变量声明错误

   • 修复了 let lastIndex = lastIndex = ... 的重复声明bug

3. 状态重置错误

   • 修复了 this.deltaLeft == 0 应该是赋值 = 0 而不是比较 == 的严重bug

⚡ 性能优化

1. 生命周期优化

   • 添加100ms延迟确保DOM渲染完成
   • 优化元素查询逻辑，减少不必要的查询

2. 防重复触发

   • 新增 isMoving 状态标识
   • 防止拖拽过程中的重复触发

3. 状态管理优化

   • 新增 resetMoveState() 方法统一管理状态重置
   • 优化了 findOverIndex() 方法的计算逻辑

🛡️ 错误处理增强

1. 边界检查

   • 在所有触摸事件处理方法中添加参数验证
   • 添加数组越界检查
   • 添加元素高度初始化检查

2. 模板安全性

   • 添加 v-if="showMoveImage && moveItem" 防止空值错误

3. 调试支持

   • 添加 console.error 和 console.warn 帮助定位问题

🎯 工作原理

1. 触摸开始 (touchstart)

   • 获取被拖拽元素的位置和尺寸信息
   • 创建悬浮的拖拽预览元素
   • 设置移动状态标识

2. 触摸移动 (touchmove)

   • 计算触摸点相对于元素的偏移量
   • 实时更新悬浮元素的位置
   • 阻止默认滚动行为

3. 触摸结束 (touchend)

   • 根据最终位置计算目标索引
   • 交换数组中的元素位置
   • 触发 change 事件
   • 重置所有移动状态

🔍 核心方法

start(e, index)

处理触摸开始事件，初始化拖拽状态

move(e)

处理触摸移动事件，更新悬浮元素位置

stops(e, index)

处理触摸结束事件，完成元素交换

findOverIndex(posY)

根据Y坐标计算目标元素索引

resetMoveState()

重置所有移动相关状态

🎨 样式定制

组件使用 scoped 样式，可以通过以下方式自定义：

<style>
/* 修改列表项宽度 */
.cu-item {
  width: 80% !important;
}

/* 修改头像大小 */
.staffimage,
.staffimage image {
  width: 50px !important;
  height: 50px !important;
}
</style>

📱 兼容性

• ✅ H5
• ✅ 微信小程序
• ✅ 支付宝小程序
• ✅ 其他小程序平台

🤝 贡献

欢迎提交 Issue 和 Pull Request

📄 License

MIT License

📮 联系方式

如有问题或建议，欢迎提交 Issue