taro-ui-vue3 的虚拟列表组件VirtualScroll-Toy模板网

这篇具有很好参考价值的文章主要介绍了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
})

效果：

taro-ui-vue3 的虚拟列表组件VirtualScroll,# Taro3,小程序,# taroUiVue3,微信小程序,taro-ui-vue3,虚拟列表
源码中每个item都是通过定位来显示的，第一个top为0，之后的是item-height * index, 所以item-height中要包含每个item的间隔