V2 Lazy List: A simple lazy load list component based Vue 2.x

Quick Start/快速开始

Install/安装

npm i --save v2-lazy-list beautify-scrollbar

Or

yarn add v2-lazy-list beautify-scrollbar

Global Register/全局注册

import Vue from 'vue';

import 'beautify-scrollbar/dist/index.css';

import V2LazyList from 'v2-lazy-list';

Vue.use(V2LazyList);

Basic Usage/基本使用

<v2-lazy-list :data='data'></v2-lazy-list>

Totals: mode: demand
1
2
3
4
5
6
7
8
9
10
11
12
13
            <v2-lazy-list :data='list' :height="500" :item-height="40" 
                tag="div" 
                item-tag="div"
            >
                <template slot-scope="item">
                    <span>\{\{item\}\}</span>
                </template>
            </v2-lazy-list>
Totals: mode: lazy
1
2
3
4
5
6
7
8
9
10
11
12
13
            <v2-lazy-list :data='list' :height="500" :item-height="40" 
                tag="div" 
                item-tag="div"
                mode="lazy"
            >
                <template slot-scope="item">
                    <span>\{\{item\}\}</span>
                </template>
            </v2-lazy-list>
Infinite Scrolling 
                <v2-lazy-list :data='list2' height="500" item-height="40" 
                :threshold="20" 
                @reach-threshold="appendList2Data"
            >
            </v2-lazy-list>