更新记录

v1.0.0（2025-02-18） 下载此版本

v1.0.0

平台兼容性

DraggableList 拖拽排序组件

一个基于 uni-app 的轻量级拖拽排序列表组件，支持流畅的拖拽动画和自动排序功能。

功能特点

• 🚀 流畅的拖拽动画效果
• 📱 完美支持移动端触摸操作
• 🎯 精确的位置计算和自动排序
• 💫 平滑的过渡动画
• 🔒 智能的边界处理
• 🎨 可自定义样式
• 📦 零依赖，轻量化实现

安装使用

1. 复制 DraggableList 组件到你的项目中
2. 在页面中引入并使用

<template>
  <DraggableList :list="menuList" @update="onListUpdate" />
</template>
<script>
import DraggableList from "../components/DraggableList/DraggableList.vue";
export default {
  components: {
    DraggableList,
  },
  data() {
    return {
      menuList: [
        { id: 1, text: "账户余额", icon: "path/to/icon" },
        { id: 2, text: "支付宝", icon: "path/to/icon" },
      ],
    };
  },
  methods: {
    onListUpdate(newList) {
      this.menuList = newList;
    },
  },
};
</script>

API 文档

Props

列表项数据格式

interface ListItem {
id: number | string; // 唯一标识
text: string; // 显示文本
icon?: string; // 图标路径（可选）
}

实现原理

1. 触摸处理：

   • 监听 touchstart、touchmove 和 touchend 事件
   • 计算触摸点相对位置和移动距离

2. 位置计算：

   • 使用 transform 进行位置变换
   • 实时计算目标位置和索引

3. 动画效果：

   • 使用 CSS transition 实现平滑过渡
   • 拖拽时禁用动画以保证响应度

4. 自动排序：

   • 基于当前位置计算目标索引
   • 使用数组操作实现列表重排

注意事项

1. 确保列表项都有唯一的 id
2. 建议列表项不要过多（建议不超过50个）
3. icon 路径需要是有效的图片资源
4. 适配不同屏幕尺寸时注意单位使用 rpx

兼容性

• 支持所有 uni-app 支持的平台
• 在 iOS 和 Android 上经过完整测试
• 支持 Vue2 和 Vue3

License

MIT