@mosowe2/ui：【InventedList】虚拟列表_vue2 虚拟列表组件-优快云博客

本文链接：https://blog.youkuaiyun.com/skyblacktoday/article/details/126208436

本文介绍了一个基于Vue的虚拟滚动列表组件的使用方法，该组件通过设置固定高度并根据第一项确定所有项的高度，优化了大数据量列表的渲染性能。通过`npm install @mosowe2/ui`安装，并在`main.js`中配置。在`.vue`文件中，可以通过`<inventedList>`组件并结合`ref`和`slot`来创建和定制虚拟滚动列表，监听`onScrollBottom`事件处理滚动到底部的情况。

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

虚拟滚动列表，每一项的高度时根据第一项定的
attr

属性	说明	类型
listData	数据列表	array
instance	父级容器，没有默认时window，值为元素ref

event

事件	说明
onScrollBottom	滚动到底部事件

slot

事件	说明
default	默认插槽，scope为当前项数据

使用方法

安装

npm i @mosowe2/ui

配置

main.js配置，因为是依赖@vue/composition-api，所以这个也是要安装和配置的

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';
import App from './App.vue';
import router from './router';
import mosoweUI from '@mosowe2/ui'  // 引入


Vue.config.productionTip = false;
Vue.config.silent = true;
Vue.use(VueCompositionApi);
Vue.use(mosoweUI) // 配置

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

使用

.vue文件中直接使用

  <div class="test">
    <div
      ref="InventedList"
      style="
        width: 500px;
        height: 300px;
        overflow-y: scroll;
        margin-bottom: 100px;
      "
    >
      <inventedList :listData="listData" :instance="InventedList" row-key="id">
        <template #default="{ listItem }">
          <div class="item" style="height: 50px">{{ listItem }}</div>
        </template>
      </inventedList>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "@vue/composition-api";
export default defineComponent({
  components: {},
  setup() {
    // 虚拟列表
    const InventedList = ref(null);
    const createList = () => {
      const list = [];
      for (let i = 0; i < 100; i++) {
        list.push({
          name: "test",
          id: i,
        });
      }
      return list;
    };
    const listData = ref(createList());

    return {
      InventedList,
      listData,
    };
  },
});
</script>