vue 虚拟滚动vue-virtual-scroll-list+拖拽sortablejs

最新推荐文章于 2024-10-25 16:24:08 发布

webhejian

最新推荐文章于 2024-10-25 16:24:08 发布

阅读量1.3k

点赞数 1

文章标签： vue.js list javascript

本文链接：https://blog.youkuaiyun.com/webhejian/article/details/123074069

版权

本文介绍了如何在Vue项目中结合vue-virtual-scroll-list实现高效虚拟滚动，并利用sortablejs实现列表元素的拖拽排序功能。通过这种方式，可以优化大量数据列表的显示性能，同时提供友好的用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="hello">
    <virtual-list
      id="list"
      style="height: 1000px; overflow-y: auto"
      :data-key="'id'"
      :data-sources="items"
      :data-component="itemComponent"
    />
  </div>
</template>

<script>
import Sortable from "sortablejs";
import Item from "./item";
import VirtualList from "vue-virtual-scroll-list";
const  createData = (num) => {
  let list = [];
  for (let index = 0; index < num; index++) {
    const obj = { id: index };
    list.push(obj);
  }
  return list;
}
export default {
  components: { VirtualList },
  data() {
    return {
      itemComponent: Item,
      items: createData(10000),
    };
  },
  mounted() {
    const el = document.querySelector('#list>div')
    Sortable.create(el, {
      onMove: (evt