https://github.com/tangbc/vue-virtual-scroll-list

    1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <style>
    8.         .wrapper {
    9.           height: 100%;
    10.           overflow: auto;
    11.         }
    13.         .item {
    14.           height: 50px;
    15.           padding-left: 50px;
    16.         }
    17.     </style>
    18. </head>
    19. <body>
    21.     <div id="app">
    22.       <div class="wrapper" ref="wrapper" @scroll="handleScroll" :style="{ height: height + 'px' }">
    23.         <div ref="w">
    24.           <div :style="{ height: `${shimTopOffset}px` }"></div>
    25.           <div
    26.             class="item"
    27.             v-for="item in showList"
    28.             :key="item.index"
    29.             :style="{
    30.               height: `${itemHeight}px`,
    31.               color: item.color,
    32.             }"
    33.           >
    34.             {{ item.index }}
    35.           </div>
    36.           <div :style="{ height: `${shimBottomOffset}px` }"></div>
    37.         </div>
    38.       </div>
    39.     </div>
    41. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    42. <script>
    43.     new Vue({
    44.       el: '#app',
    45.       data() {
    46.         return {
    47.           height: 500,
    48.           itemHeight: 50,
    49.           data: Array.from({ length: 6000 }).map((_, index) => ({
    50.             index,
    51.             color: `#${Math.random()
    52.               .toString(16)
    53.               .substr(2, 6)}`,
    54.           })),
    55.           showList: [],
    56.           shimTopOffset: 0,
    57.           shimBottomOffset: 0,
    58.         };
    59.       },
    60.       mounted() {
    61.         this.update(0);
    62.         this.$nextTick(() => {
    63.           this.maxHeight = this.$refs.w.offsetHeight;
    64.         });
    65.       },
    66.       methods: {
    67.         handleScroll() {
    68.           const scrollTop = this.$refs.wrapper.scrollTop;
    69.           if (scrollTop >= 0 && scrollTop + this.height <= this.maxHeight) {
    70.             window.requestAnimationFrame(() => {
    71.               this.update(scrollTop);
    72.             });
    73.           }
    74.         },
    75.         update(scrollTop) {
    76.           const visibleStart = scrollTop;
    77.           const visibleEnd = scrollTop + this.height;
    78.           this.showList = this.getShowList(visibleStart, visibleEnd, this.data);
    79.         },
    80.         getShowList(start, end, data) {
    81.           if (start < end) {
    82.             const lo = this.getStartIndex(start, this.itemHeight);
    83.             const hi = this.getEndIndex(end, this.itemHeight);
    84.             this.shimTopOffset = lo >= 0 ? lo * this.itemHeight : 0;
    85.             this.shimBottomOffset = hi >= 0 ? (data.length - hi) * this.itemHeight : 0;
    86.             return data.slice(lo, hi);
    87.           } else {
    88.             this.shimTopOffset = 0;
    89.             this.shimBottomOffset = 0;
    90.             return [];
    91.           }
    92.         },
    93.         getStartIndex(s, itemHeight) {
    94.           const startIndex = ~~(s / itemHeight);
    95.           return startIndex >= 0 ? startIndex : 0;
    96.         },
    97.         getEndIndex(e, itemHeight) {
    98.           const endIndex = Math.ceil(e / itemHeight);
    99.           return endIndex <= this.data.length ? endIndex : this.data.length;
    100.         },
    101.       },
    102.       watch: {
    103.         data: {
    104.           handler(newVal, oldVal) {
    105.             if (oldVal) {
    106.               this.$nextTick(() => {
    107.                 this.$refs.wrapper.scrollTop = 0;
    108.                 this.handleScroll();
    109.               });
    110.             }
    111.           },
    112.           immediate: true,
    113.         },
    114.         itemHeight() {
    115.           this.handleScroll();
    116.         },
    117.       },
    118.     })
    119. </script>
    120. </body>
    121. </html>