Vue.js VueJS（另一个）虚拟滚动实现

我正在尝试为高度可变的项目实现虚拟滚动。到目前为止，我看到的所有其他实现都要求您在声明模块时指定高度

我已将清单执行如下：

<div 
    class="main" 
    ref="main" 
    @scroll="handleScroll"
    >
    <div :style="{
            'margin-top':padTop+'px',
            'margin-bottom':padBottom()+'px'
        }">
        <div v-for="i in maxDisplayed">
            <slot :name="'s-' + (i + startIndex - 1)">{{i + startIndex - 1}}</slot>
        </div>
    </div>
</div>

到目前为止，当用户滚动速度相对较慢时，我的代码工作得很好。但是当你快速滚动列表时，它失败了。我怀疑这与未能抓住所有从滚动窗口飞过的孩子有关。任何帮助都将不胜感激

---

您是否尝试过使用插件而不是自己使用？这可能会有所帮助：如果列表中有20k个元素，vuebar并没有真正给我带来优势——它仍然会变慢。因此，我尝试实现虚拟滚动——它对dom隐藏了“不可见”元素，这样就不会减慢页面速度。谢谢你的帮助。您取得了更多的成果吗？没有什么让我满意的，我开始使用分页

handleScroll (e) {
    if (!this.$refs.main || this.$refs.main.scrollTop == undefined) return; //can't calculate if there's nothing displayed
    // top of the items list container relative to the page top
    let mainTop = this.$refs.main.getBoundingClientRect().top; 
    // bottom position of the first "displayed" item
    let itemTop = this.$refs.main.children[0].children[0].children[0].getBoundingClientRect().top;
    let itemBottom = this.$refs.main.children[0].children[0].children[0].getBoundingClientRect().bottom;
    if (itemBottom < mainTop && (Object.keys(this.$slots).length > (this.startIndex + this.maxDisplayed))) { 
        this.startIndex ++;
        this.heights.push(this.$refs.main.children[0].children[0].children[0].clientHeight);
    }
    else if (itemTop > mainTop && (this.startIndex > 0)) {
        this.heights.pop();
        this.startIndex = Math.max(this.startIndex - 1, 0);
    }
},