virtual-block

🌈Render what's visible

Demo

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