长列表虚拟滚动

<div id="app">
      <div class="list-wrap" ref="listWrap" @scroll="scrollListener">
        <div class="scroll-bar" ref="scrollBar"></div>
        <div class="list" ref="list">
          <div v-for="item in showList">{{item}}</div>
        </div>
      </div>
    </div>

.list-wrap {
        position: relative;
        overflow-y: auto;
        width: 200px;
        margin: 100px auto;
        box-sizing: border-box;
        border: solid 1px #e2e2e2;
      }

      .list {
        position: absolute;
        top: 0;
        left: 0;
        width:100%
      }

      .list>div {
        border-bottom: solid 1px #e2e2e2;
        line-height: 40px;
        padding:0 10px;
        box-sizing: border-box;

      }

<script src="https://lib.baomitu.com/vue/2.6.12/vue.js"></script>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            list: [], // 超长数据显示列表
            itemHeight: 41, // 第一条数据定高显示
            showNum: 10, // 显示几条数据
            start: 0, // 滚动过程显示开始的位置
            end: 10, // 滚动过程显示的结束索引
          };
        },
        computed: {
          showList() {
            return this.list.slice(this.start, this.end);
          },
        },
        mounted() {
          // 初始数据
          for (let i = 0; i < 1000; i++) {
            this.list.push("列表项" + i);
          }

          // 计算滚动容器高度
          this.$refs.listWrap.style.height =
            this.itemHeight * this.showNum + "px";

          // 计算总的数据需要的高度，构建滚动条的高度
          this.$refs.scrollBar.style.height =
            this.itemHeight * this.list.length + "px";
        },
        methods: {
          scrollListener() {
            // 获取滚动高度
            let scrollTop = this.$refs.listWrap.scrollTop;

            // 开始的数据索引
            this.start = Math.floor(scrollTop / this.itemHeight);

            // 计算结束的索引
            this.end = this.start + this.showNum;

            // 绝对定位相对定位的偏移量
            this.$refs.list.style.top = this.start * this.itemHeight + "px";
          },
        },
      });
    </script>