uni-app的虚拟列表

貂蝉空大

于 2024-01-10 15:24:37 发布

阅读量789

点赞数 8

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/cyj0919/article/details/135504699

版权

<template>
  <div>
    <ul ref="list" class="list">
      <li v-for="(item, index) in virtualList" :key="item.id" class="item">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [], // 原始数据列表
      virtualList: [], // 虚拟列表
      startIndex: 0, // 可视区域内第一个列表项的索引
      endIndex: 0, // 可视区域内最后一个列表项的索引
      itemHeight: 50, // 列表项的高度
      visibleCount: 5, // 可视区域内的列表项个数
    };
  },
  mounted() {
    // 初始化数据
    this.initData();
    // 监听滚动事件
    this.$refs.list.addEventListener('scroll', this.handleScroll);
    // 初始化虚拟列表
    this.initVirtualList();
  },
  methods: {
    initData() {
      // 获取数据列表
      // ...
    },
    initVirtualList() {
      // 计算可视区域内的列表项索引范围
      this.startIndex = 0;
      this.endIndex = Math.min(this.startIndex + this.visibleCount - 1, this.list.length - 1);
      // 截取可视区域内的列表项
      this.virtualList = this.list.slice(this.startIndex, this.endIndex + 1);
    },
    handleScroll() {
      // 计算滚动距离
      const scrollTop = this.$refs.list.scrollTop;
      // 计算可视区域内的列表项索引范围
      this.startIndex = Math.floor(scrollTop / this.itemHeight);
      this.endIndex = Math.min(this.startIndex + this.visibleCount - 1, this.list.length - 1);
      // 截取可视区域内的列表项
      this.virtualList = this.list.slice(this.startIndex, this.endIndex + 1);
    },
  },
};
</script>

<style>
.list {
  height: 250px;
  overflow-y: auto;
}
.item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
</style>