更新记录

1.0.0（2025-07-01） 下载此版本

发布

平台兼容性

uni-app(4.24)

其他

虚拟列表-解决大数据列表性能问题

组件名 VirtualList

使用方式

引入直接使用，插槽传出每一项的item,index宽度是100%，高度是根据外部盒子自适应，需要传入每一项的高度，如果项目使用了postcss vw格式 则需要将postCssWidth属性传入postcss设置的宽度，不传按照px计算渲染。

<template>
  <view
    style="height: calc(100vh - 200px); width: 100vw; background-color: red"
  >
    <h1 @click="handleClick">asdasd</h1>
    <easy-use-virtualList
      :items="items"
      :itemHeight="90"
      :postCssWidth="1024"
      ref="virtualList"
    >
      <template #default="{ item, index }">
        <view class="list-item">
          <text>{{ item }}</text>
        </view>
      </template>
    </easy-use-virtualList>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    setTimeout(() => {
      this.items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);
    }, 1000);
  },
  methods: {
    handleClick() {
      this.$refs.virtualList.scrollToTop();
    },
  },
};
</script>

<style scoped>
.list-item {
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}
</style>

api