t-virtual-scroll

VirtualScroll 虚拟滚动

组件介绍

t-virtual-scroll 是高性能虚拟滚动组件，只渲染可见区域的内容，支持大数据量列表展示，适用于长列表、无限滚动等场景，大幅提升页面性能。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/virtual-scroll/virtual-scroll.uvue。

<template>
  <view class="virtual-scroll-demo">
    <t-virtual-scroll 
      :list="dataList" 
      :rowHeight="100"
      @scrollend="onScrollEnd">
      <template #default="{ item, index }">
        <view class="list-item">
          <text class="title">{{ item.title }}</text>
          <text class="desc">{{ item.description }}</text>
        </view>
      </template>
    </t-virtual-scroll>
  </view>
</template>

<script setup>
// 生成大量测试数据
const dataList = ref(Array.from({ length: 1000 }, (_, i) => ({
  id: i,
  title: `标题 ${i + 1}`,
  description: `这是第 ${i + 1} 条数据的描述信息`
})));

function onScrollEnd(e) {
  console.log('滚动到底部', e);
  // 可以在这里加载更多数据
}
</script>

<style scoped>
.virtual-scroll-demo {
  height: 100vh;
}
.list-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
}
.desc {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
  display: block;
}
</style>

Props

属性名	说明	类型	默认值
list	数据源	any[]	[]
rowHeight	每行的高度（像素）	number	120
itemClass	行盒子的样式类	string	''
scrollTop	滚动位置	number	0
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	''

Events

事件名	说明	回调参数
scrollend	滚动到底部时触发	{ detail: { scrollTop: number } }
scroll	滚动时触发（Web 端）	event
touchstart	触摸开始时触发	event
touchend	触摸结束时触发	event
initFinished	组件初始化完成触发	组件节点信息

插槽

插槽名	说明	作用域参数
default	列表项内容	{ item: any, index: number }

外部类

类名	说明
item-class	行盒子样式