# v3-virtual-scroll

> 基于 Vue 3 + TypeScript + Vite

Latest version **0.1.2** (published 2022-06-18) · 0 weekly downloads

## Install

```sh
npm install v3-virtual-scroll
pnpm add v3-virtual-scroll
yarn add v3-virtual-scroll
bun add v3-virtual-scroll
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2022-06-18 |
| First published | 2022-06-17 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | duqingyu |
| Maintainers | qingyu |
| Keywords | virtual-scroll, v3-virtual-scroll, virtual, scroll, 虚拟滚动, 长列表优化, vue3 |

## Links

- npm: https://www.npmjs.com/package/v3-virtual-scroll
- Repository: https://github.com/duqingyu/v3-virtual-scroll
- Homepage: https://github.com/duqingyu/v3-virtual-scroll#readme
- Issues: https://github.com/duqingyu/v3-virtual-scroll/issues
- npm.io page: https://npm.io/package/v3-virtual-scroll

## Recent versions

- 0.1.2 (latest) — 2022-06-18
- 0.1.1 — 2022-06-18
- 0.1.0 — 2022-06-18
- 0.0.9 — 2022-06-18
- 0.0.8 — 2022-06-17
- 0.0.7 — 2022-06-17
- 0.0.6 — 2022-06-17
- 0.0.5 — 2022-06-17
- 0.0.4 — 2022-06-17
- 0.0.3 — 2022-06-17
- 0.0.2 — 2022-06-17
- 0.0.1 — 2022-06-17

## README

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

基于 Vue 3 + TypeScript + Vite

## 安装使用

```
npm install v3-virtual-scroll -S
```

## 使用示例

```html
<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>
```

```javascript
<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 | 否   | 一屏可放置的最大项数 | 结束占位 |

---
_Source: https://npm.io/package/v3-virtual-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._