English | 简体中文

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 |