https://github.com/yuanfux/virtual-block

🌈vue-virtual-block render what's visible
https://github.com/yuanfux/virtual-block

virtual-list virtualscroll vue

Last synced: 7 days ago
JSON representation

🌈vue-virtual-block render what's visible

• Host: GitHub
• URL: https://github.com/yuanfux/virtual-block
• Owner: yuanfux
• Created: 2018-04-23T02:13:55.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-17T03:38:07.000Z (over 6 years ago)
• Last Synced: 2024-11-01T11:46:54.254Z (12 days ago)
• Topics: virtual-list, virtualscroll, vue
• Language: Vue
• Homepage: https://yuanfux.github.io/virtual-block/
• Size: 301 KB
• Stars: 45
• Watchers: 3
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
# virtual-block

[![npm version](https://badge.fury.io/js/virtual-block.svg)](https://badge.fury.io/js/virtual-block)

> 🌈Render what's visible

[Demo](https://yuanfux.github.io/virtual-block/)

## Install

```

npm i virtual-block

```

## Import

```javascript

import Vue from 'vue'

import VirtualBlock from 'virtual-block/dist'

Vue.use(VirtualBlock)

```

## Usage

### Page Mode

```html

    

        

    

```

### Container Mode

```html 

    

        

    

```

### Fixed Block Height

```html

    

        

    

```

### Unique virtual block

```html

    

        

            

        

        

            

        

        

            

        

    

```

## Props

Name | Type | Default | Description

--- | --- | --- | ---

`data` | `Array` | - | **Required**. An Array of Object used as the source data.

`height` | `Number` | - | **Required when `pageMode` is `false`**. The height of the virtual block container.

`fixedBlockHeight` | `Number` | - | **Optional**. Specify this prop will assume every block has the same height value and the `height` keys in `data object` will be ignored. Note use `fixedBlockHeight` will improve the performance.

`pageMode` | `Boolean` | `true` | **Optional**. `true` assumes the scroller will be on the `window`. `false` assumes the scroller will be on the `virtual block container`.

## DataObject

Name | Type | Default | Description

--- | --- | --- | ---

`id` | String/Number | - | **Required**. Unique key for each virtual block.

`height` | Number | - | **Required when prop `fixedBlockHeight` is `not` specified**. The height of each virtual block.

## License

MIT