Skip to content
vue-virtual-listview
Vue JavaScript HTML
Branch: master
Clone or download
Latest commit 6865d0c Nov 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src 虚拟列表 Nov 6, 2019
.gitignore
1.gif
2.gif 图片更新 Nov 6, 2019
README.md 添加图片 Nov 6, 2019
babel.config.js init Aug 15, 2019
package.json
webpack.config.js

README.md

vue-virtual-listview

一个基于Vue2.6+的虚拟列表组件,可同时加载大量数据,并支持动态高度。

注意: 由于在 iOS UIWebviews 中,scroll 事件是在滚动停止之后触发的,所以不兼容iOS UIWebviews。了解更多

安装

通过 npm:

npm install vue-virtual-listview --save

基本使用

<template>
    <VirtualList
        :list-data="data"
        :estimated-item-size="100"
        v-slot="slotProps"
    >
        <div class="context">
            {{ slotProps.item.value }}
        </div>
    </VirtualList>
</template>
import VirtualList from 'vue-virtual-listview'

export default{
    data(){
        return [
            {
                value:'Est quo tempora consequatur......'
            },
            {
                value:'Excepturi magni hic deserunt......'
            }
            //.....
        ]
    },
    component:{
        VirtualList
    }
}

下拉刷新

<template>
    <VirtualList
        ref="vlist"
        :list-data="data"
        :estimated-item-size="100"
        :top-load-more="true"
        :top-method="update"
        v-slot="slotProps"
    >
        <div class="context">
            {{ slotProps.item.value }}
        </div>
    </VirtualList>
</template>
import VirtualList from 'vue-virtual-listview'

export default{
    data(){
        return [
            {
                value:'Est quo tempora consequatur......'
            },
            {
                value:'Excepturi magni hic deserunt......'
            }
            //.....
        ]
    },
    methods:{
        update(){
            let data = [
                {
                    value:'This is one demo~'
                },
                {
                    value:'This is tow demo~'
                }
                //.....
            ];
            this.data = data;
            this.$refs.vlist.onBottomLoaded();
        },
    },
    component:{
        VirtualList
    }
}

属性

参数 类型 默认值 是否必填 说明
listData Array 列表所需要的数据
height String 100% 包裹元素的高度。
column Number 1 列数
bufferScale Number 1 在可见区域之外的上/下方预渲染比例,避免快速滑动时出现闪烁
estimatedItemSize Number 150 列表项的预估高度,用于预先计算可视区域的显示项数
topLoadMore Boolean false 是否启用下拉刷新
topMethod Function 刷新时调用的回调函数
topDistance Number 70 触发 topMethod 的下拉距离阈值(像素)
maxDistance Number 0 组件可移动的最大距离(像素),若为 0 则不限制
distanceScale Number 2 手指移动与组件移动距离的比值
topTextColor String #000000 刷新区域的文本颜色
topPullText String 上拉刷新 刷新状态为pull时提示区的文字
topDropText String 释放更新 刷新状态为drop时提示区的文字
topLoadingText String 加载中... 刷新状态为loading时提示区的文字

事件

事件名称 回调参数 说明
top-status-change 顶部刷新区域状态变更时触发 提示区域状态

提示区状态说明

状态 说明
pull 开始拖拽,距离未达到topDistance
drop 距离达到 topDistance 释放触发 topMethod
loading 已被释放,topMethod 已经执行
none 刷新完成或未触发刷新动作

插槽

名称 说明 插槽Prop
default 默认插槽 item:列表项当前数据
row:当前项在整体中的行数
col:当前项在当前行中的列数
top 顶部提示区插槽 dargState:顶部刷新提示区的状态
dargDistance:顶部刷新提示区的距离
You can’t perform that action at this time.