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