Vue3 大型图片数据拖动排序

Question

在请求接口会返回1000-10000条数据，数据需要请求图片地址后可以拖动排序。

Answer 1

引自免费微信小程序：皆我百晓生

在Vue3中实现大型图片数据的拖动排序，考虑到性能和用户体验，我们可以采用以下策略：

1. 分页加载数据

由于数据量庞大，一次性加载所有图片会导致页面响应缓慢，因此建议先实现分页加载。你可以设置每页显示的图片数量，例如20或50张，随着用户的滚动动态加载更多。

2. 使用虚拟列表优化渲染

对于长列表，使用Vue的<Teleport>或第三方库如vue-virtual-scroller来只渲染可视区域内的图片，可以极大提高性能。

3. 拖拽排序库

使用第三方拖拽排序库，如Vue.Draggable（基于Sortable.js），它非常适合处理列表的拖拽排序功能。但考虑到性能，需确保它仅对当前可视区域内的元素启用拖拽功能。

示例代码

首先，安装Vue.Draggable:

npm install vuedraggable

然后，在Vue3组件中应用：

<template>
  <div class="gallery">
    <draggable
      v-model="sortedImages"
      item-key="id"
      @start="drag = true"
      @end="saveOrder; drag = false"
    >
      <div v-for="image in sortedImages" :key="image.id">
        <img :src="image.url" alt="Image" />
      </div>
    </draggable>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Draggable from 'vuedraggable';

const drag = ref(false);
const images = ref([]);
const sortedImages = ref([]);

// 假设这是从接口获取的数据
const fetchData = async () => {
  // 逻辑处理分页加载，这里简化处理为一次性加载示例数据
  const response = await fetch('your_api_endpoint');
  images.value = await response.json();
  sortedImages.value = [...images.value]; // 初始化排序
};

onMounted(() => {
  fetchData();
});

// 保存排序后的顺序到服务器
const saveOrder = () => {
  if (!drag.value) return; // 防止非拖拽操作触发
  // 这里发送sortedImages到后端以更新排序
  console.log('Saving new order:', sortedImages.value.map(i => i.id));
};

</script>

<style scoped>
.gallery {
  /* 添加必要的样式 */
}
</style>

注意事项

• 确保图片URL已经正确填充到每个item中。
• saveOrder方法内应包含实际发送排序信息到后端的逻辑，这里只是打印了排序后的ID列表作为示例。
• 为了提升用户体验，可以添加加载指示器、错误处理以及滚动加载更多图片的逻辑。

以上方案结合了分页加载、虚拟列表的概念（虽然未直接展示如何实现虚拟列表，但提供了思路）以及Vue.Draggable库来实现高效的大数据量图片拖动排序。