# virtual-scr-list

> 一个vue的大数据虚拟滚动列表...

Latest version **1.0.2** (published 2021-07-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install virtual-scr-list
pnpm add virtual-scr-list
yarn add virtual-scr-list
bun add virtual-scr-list
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-07-06 |
| First published | 2021-07-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 51.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | ZYQ\| |
| Maintainers | qiao195423 |
| Keywords | vue, js, html, virtual, virtual-scr, virtual-scr-list |

## Links

- npm: https://www.npmjs.com/package/virtual-scr-list
- Repository: https://github.com/ZYQIO/virtual-scroll
- Issues: https://github.com/ZYQIO/virtual-scroll/issues
- npm.io page: https://npm.io/package/virtual-scr-list

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.2 (latest) — 2021-07-06
- 1.0.1 — 2021-07-05
- 1.0.0 — 2021-07-04

## README

# virtual-scr-list

## Project setup
```
npm i virtual-scr-list

```

## usAge
```

import VirtualScroll from 'virtual-scr-list'
import 'virtual-scr-list/styles/index.css'

Vue.use(VirtualScroll)


<VirtualScroll
      :url="url"
      :oneHeight="oneHeight"
      :query="query"
      v-slot:default="infoItem"
    >
    <!-- slot, 自定义内容 -->
    <router-link class="item" to="xxx" tag="div">
        <div class="item-left">
          <h4>{{ infoItem.item.title }}</h4>
          <p class="item-info">
            <span>
              <span>{{ infoItem.item.reads }}</span>
              <span>新浪新闻</span>
            </span>
            <span>{{ infoItem.item.date }}</span>
          </p>
        </div>
        <div class="item-right">
          <!-- <img :src="item.url" alt="" /> -->
          图片
        </div>
    </router-link>
</VirtualScroll>

```

> slot 里面的内容自定义, 同理样式也需要自定义

> 在使用组件的外层盒子, 要有具体样式

> v-slot:default="infoItem" slot 接收的数据

## Props type

| **&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;** | **Type**  | **Description**                                                               |
|------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `query`       | Object | 请求参数. |
| `oneHeight`   | Number | 单条数据的高度. |
| `url`         | String | 请求url. |

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