0.1.2 • Published 2 years ago
v3-virtual-scroll v0.1.2
长列表虚拟滚动按需展示优化
基于 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 | 否 | 一屏可放置的最大项数 | 结束占位 |