长列表虚拟滚动按需展示优化

基于 Vue 3 + TypeScript + Vite

安装使用

npm install v3-virtual-scroll -S

使用示例

<template>
  <v3-virtual-scroll
      v-slot="{ item }"
      :list="list"
      :height="667" 
      :itemHeight="104"
      :startOffset="2"
      :endOffset="2"
      key="id"
      @onTouchEnd="onTouchEnd"
      @onTouchTop="onTouchTop"
    >
      <router-link :to="{ name: 'Detail', params: { item: json(item) } }" class="scroll-item">
        <div class="scroll-item__left" :style="{ 'background-image': `url(${item.image})` }"></div>
        <div class="scroll-item__right">
          <div class="scroll-item__right--title">{{ item.title }}</div>
          <div class="scroll-item__right--desc">
            <p>{{ item.name }}发布于：{{ item.date }}</p>
            <p>{{ item.address }}</p>
          </div>
        </div>
      </router-link>
    </v3-virtual-scroll>
</template>

<script setup>
import v3VirtualScroll from 'v3-virtual-scroll'
import 'v3-virtual-scroll/dist/style.css'
import { ref, reactive } from 'vue'

let list = reactive([])

async function onTouchTop(done: Function): Promise<void> {
  console.log('滚动到顶了..')
  // 业务加载数据方法
  // await doLoadList()..
  // 加载完成执行done方法让v3-virtual-scroll组件打开加载更多开关
  await done()
}
async function onTouchEnd(done: Function): Promise<void> {
  console.log('滚动到底了..')
  // 业务加载数据方法
  // await doLoadList()..
  // 加载完成执行done方法让v3-virtual-scroll组件打开加载更多开关
  await done()
}
</script>

仓库模板【可以查看：实际长列表例子】

1. git clone https://github.com/duqingyu/v3-virtual-scroll
2. npm install
3. npm run dev

参数示例

| 参数 | 类型 | 必选 | 默认 | 描述 | | ----------- | ------ | ---- | -------------------- | -------- | | list | Array | 是 | [] | 数据源 | | key | String | 是 | id | 唯一标识 | | height | Number | 否 | window.screen.height | 容器高度 | | itemHeight | Number | 是 | | 每项高度 | | startOffset | Number | 否 | 一屏可放置的最大项数 | 开始占位 | | endOffset | Number | 否 | 一屏可放置的最大项数 | 结束占位 |