❤
npm
Sign UpSign In

virtual-block

1.1.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i virtual-block

Repository

github.com/yuanfux/virtual-block

Homepage

github.com/yuanfux/virtual-block#readme

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

650 kB

Total Files

17

Last publish

Collaborators

  • yuanfux
Try on RunKit
Report malware