列表虚拟滚动

父组件

<template>
  <div>
    <virtuaList :listData="list" :itemHeight="20" :visibleCount="30" />
  </div>
</template>

<script>
import virtuaList from './components/virtuaList.vue';
export default {
  name: "App",
  components: {
    virtuaList
  },
  data() {
    return {
      list:[]
    };
  },
  mounted() {
    // 默认数据
    for (let i = 1; i < 10000; i++) {
      this.list.push(i);
    }
  },
  methods: {}
};
</script>

子组件

<template>
    <!--虚拟滚动-->
    <div :style="{ height: itemHeight * visibleCount + 'px' }" ref="scrollContainer" class="scrollContainer">
        <div :style="{ height:itemHeight * listData.length + 'px'}" class="scrollContent">

        </div>
        <div ref="listContainer" class="listContainer">
            <div v-for="item of slicesList" :style="{ height: itemHeight + 'px' }"  :key="item">{{item}}</div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'VirtuaList',
  props:
 {
    listData: {
      type: Array,
      default: () => [],
    },
    itemHeight:{
      type: Number,
      default: 20,
    },
    visibleCount:
    {
      type: Number,
      default: 20,
    },
  },
  data() {
    return {
      // 虚拟列表
      start: 0, // 截取开始
      end: 0, // 截取结束
    };
  },
  computed:{
    slicesList(){
      return this.listData.slice(this.start,this.end);
    }
  },
  mounted() {
    // 结束位置等于可视区域数量
    this.end = this.visibleCount;
    this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 获取滚动条位置
      const scrollTop = this.$refs.scrollContainer.scrollTop;
      // 计算开始位置
      this.start = Math.floor(scrollTop / this.itemHeight);
      // 计算结束位置
      this.end = this.start + this.visibleCount;
        
      // 设置列表容器位置
      this.$refs.listContainer.style.transform = `translateY(${this.start * this.itemHeight}px)`;
    },
  },
  beforeDestroy() {
    this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<style lang="css" scoped>
    .scrollContainer{
        width: 300px;
        background-color: aquamarine;
        position: relative;
        margin: 0 auto;
        overflow-y: scroll;
    }
    .scrollContent{
        /* 滚动条 */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
</style>

原文地址：https://blog.csdn.net/qq_36405210/article/details/140498601

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！