uniapp如何实现虚拟列表上下滚动技术？

我写了一个代码实现了uniapp的虚拟列表滚动加载，

代码说明：

totalItems：整个列表的数据，示例中用的是 1000 条数据。

visibleItemCount：设定在可视区域最多显示的条目数。

buffer：设定滚动缓冲区，这样可以在实际滚动时减少抖动。

visibleItems：计算当前需要显示的条目，截取 totalItems 的一部分。

topBlankHeight 和 bottomBlankHeight：计算上下两部分占位的空白高度

<template>
  <view class="container">
    <scroll-view
      class="scroll-view"
      scroll-y
      @scroll="onScroll"
      :scroll-top="scrollTop"
    >
      <!-- 占位的顶部空白区域 -->
      <view :style="{ height: topBlankHeight + 'px' }"></view>

      <!-- 实际显示的内容 -->
      <view
        v-for="(item, index) in visibleItems"
        :key="item.id"
        class="item"
      >
        {{ item.text }}
      </view>

      <!-- 占位的底部空白区域 -->
      <view :style="{ height: bottomBlankHeight + 'px' }"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalItems: [], // 原始数据
      itemHeight: 60, // ...

点击查看剩余70%