taro-ui-vue3 的虚拟列表组件VirtualScroll

项目：taro3+vue3

用法：

<at-virtual-scroll
    bench="5"
    :height="listHeight"
    :items="fieldList"
    :item-height="itemHeight"
>
  <template #default="{ index, item }">
    <view :id="`merchant-item-${index}`"
        class="merchant-item f-l-c">
      <image class="logo" src=""></image>
      <view class="con">
        索引号-{{ index }}
      </view>
      <view
          class="navigator">
        <image class="img-navigator" src=""></image>
      </view>
    </view>
  </template>
</at-virtual-scroll>

参数

height — 列表容器高度
item-height — 列表item高度
items — 列表数据

注意点：item-height不能直接用设计稿里面的高度xxpx，要转成rpx, 而css里面item的高度用设计稿的高度，比如设计稿宽750px, item高200px，间距20px, 列表容器高度是81vh, 如果容器需要减去其他元素的高度，其他元素高也要转rpx

const itemHeight = computed(() => {
  return Math.ceil(Taro.getSystemInfoSync().windowWidth / 750 * 220)
})

const listHeight = computed(() => {
   return Taro.getSystemInfoSync().windowHeight * 0.81
})

效果：

源码中每个item都是通过定位来显示的，第一个top为0，之后的是item-height * index, 所以item-height中要包含每个item的间隔

问题：

列表向下滚动没有问题，但是向上回滚时，节点不能和视图相对应