Scat-virtual-list NPM

Overview

Env and dependencies

Vue2
node
yarn
webpack
eslint
@vue/cli

Setup

Install

npm install scat-virtual-list

Use

Global Reference

import Vue from 'vue'
import ScatVirtualList from 'scat-virtual-list'
Vue.use(ScatVirtualList)

<template>
  <div>
    <scat-virtual-list :items="items" :height="300">
      <div slot-scope="{ item, realIndex }">
        {{ item }}, {{ realIndex }}
      </div>
    </scat-virtual-list>
  </div>
</template>

Local Reference

<template>
  <div>
    <scat-virtual-list :items="items" :height="300">
      <div slot-scope="{ item, realIndex }">
        {{ item }}, {{ realIndex }}
      </div>
    </scat-virtual-list>
  </div>
</template>
 
<script>
import ScatVirtualList from 'scat-virtual-list/scat-virtual-list.common'

export default {
  name: ''
  components: { ScatVirtualList },
  data () {
    return {
      items: Array.from({ length: 100 }).map((v, k) => ({ name: v, id: k }))
    }
  }
}
</script>

API

Property	Description	Type	Default
height	component height	`number \| string`	inherit
items	list data	`array`	[]
item-height	height of each row	`number \| string`	62px
show-scroll	show scrollbar(Not Support Chromium)	`boolean`	false
timeInterval	time interval of call scroll callback function(millisecond)	`number`	0

Slot

name	bind
default	`item: object` current row data `index: number` index in rendered list `realIndex:number` index in real list

Events

Events Name	Description	Arguments
scroll	scroll callback function	`(firstPos: number, renderMaxNum: number):void`

Methods

Methods Name	Description	Parameter	Return
onScrollMoving()	Calculate the correct top row index and maximum number of randered rows	-	`void`

Other

License

MIT

Browsers support

Modern browsers and IE10.

IE / Edge	Firefox	Chrome	Safari	Opera
IE10, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

core-js vue

@infinitebrahmanuniverse/nolb-sca @everything-registry/sub-chunk-2715

0.1.1

2 years ago

0.1.0

2 years ago

1.0.0

2 years ago