# fancy_virtual_list

> 1. 注册

Latest version **1.0.8** (published 2023-05-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install fancy_virtual_list
pnpm add fancy_virtual_list
yarn add fancy_virtual_list
bun add fancy_virtual_list
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-05-06 |
| First published | 2023-05-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fancy_fish |
| Keywords | virtual_list, infinite, scroll |

## Links

- npm: https://www.npmjs.com/package/fancy_virtual_list
- npm.io page: https://npm.io/package/fancy_virtual_list

## Recent versions

- 1.0.8 (latest) — 2023-05-06
- 1.0.7 — 2023-05-06
- 1.0.6 — 2023-05-06
- 1.0.5 — 2023-05-06
- 1.0.4 — 2023-05-06
- 1.0.3 — 2023-05-06
- 1.0.2 — 2023-05-06
- 1.0.1 — 2023-05-06

## README

# 使用方式
1. 注册

   1. 

   2. 1. 方式一

         1. ~~~vue
            <script setup lang="ts">
            import VirtualList from './components';
            </script>
            
            <template>
              <div>
                <VirtualList  :data="data" />
              </div>
            </template>
            ~~~

      2. 方式二

         1. ~~~ts
            //全局注册
            import fvl from 'fancy_virtual_list'
            app.use(fvl.VirtualList)
            ~~~

2. 使用方式

   1. ~~~vue
      <VirtualList :data="data" />
      ~~~

   2. ~~~ts
      interface IVirtualListPropsStyle {最外层容器的基本样式
          width: string   
          height: string
          background: string
      }
      
      interface IVirtualListProps {
        style?: IVirtualListPropsStyle  
        data: any[], 
        item_height?: number, -》内容高度-》决定视口显示几个item 默认40
        item_style?: Record<string, any>  -》每个列表内容的样式
        container_style?:Record<string, any> -》外层容器的自定义样式
      }
      ~~~

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