virtual-block
🌈 Render what's visible
Install
npm i virtual-block
Import
import Vue from 'vue'
import VirtualBlock from 'virtual-block/dist'
Vue.use(VirtualBlock)Usage
Page Mode
<VirtualBlock :data="blocks">
<template slot-scope="{data}">
<!-- self defined slots -->
</template>
</VirtualBlock>Container Mode
<VirtualBlock :height="300" :pageMode="false" :data="blocks">
<template slot-scope="{data}">
<!-- self defined slots -->
</template>
</VirtualBlock>Fixed Block Height
<VirtualBlock :height="300" :pageMode="false" :fixedBlockHeight="50" :data="blocks">
<template slot-scope="{data}">
<!-- self defined slots -->
</template>
</VirtualBlock>Unique virtual block
<VirtualBlock :height="300" :pageMode="false" :data="blocks">
<template slot-scope="{data}">
<template v-if="data.id === 0">
<!-- virtual block slot when id is 0 -->
</template>
<template v-if="data.id === 1">
<!-- virtual block slot when id is 1 -->
</template>
<template v-else>
<!-- other virtual block slots -->
</template>
</template>
</VirtualBlock>Props
| Name | Type | Default | Description |
|---|---|---|---|
data |
Array<DataObject> |
- | 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