html虚拟列表,vue-better-list-view 长列表 / 虚拟列表组件 - 文章教程

网页数据加载多了都会出现卡顿，手机端的列表一般都是无限加载的，加载的数据量大了我们就需要特殊处理下了，vue-better-list-view 这个组件就是为了解决这个问题。

使用

提供 npm 版本和 umd 版本

npm 安装

// install

npm i vue-better-list-view --save-dev

// in your project

import listView from 'vue-better-list-view'

或 umd 引入

Vue.use(listView);

用法示例：

@scroll="listScroll"

:list="list"

:item-height-getter="itemHeightGetter"

:default-item-height="defaultItemHeight"

>

NO: {{ scope.item.value }}, height: {{ scope.height }}px

调试：

npm run dev

API

属性

list：array

列表源数据

item-height-getter: function(item, index)

自定义逻辑计算每一行的高度，根据item(list中的列表项)和index(在list中的索引)返回height(number类型，单位px)。

此函数在组件生命周期内只会对每个列表项最多求值一次，之后都从缓存取值。在提供了default-item-height的情况下，组件会按需调用此函数，即对可视窗口以外的且未缓存的列表项使用default-item-height作为预估行高。因此建议提供default-item-height来提高性能。

default-item-height: number

列表每行item的默认高度值(px)。

没有item-height-getter的情况下此值会是所有行的行高；有item-height-getter的情况下，此值会被用于预估未缓存项的行高，详见item-height-getter说明。

事件

scroll({ topItemIndex, bottomItemIndex, listTotalHeight, scrollTop })

列表滚动时触发。参数：topItemIndex:number(可视列表第一项的index)；bottomItemIndex:number(可视列表最后项的index)；listTotalHeight:number(列表总高度)；scrollTop:number(滚动距离)

scoped-slot

scope: {item, index, height, offset}

item(列表项)；index(列表项索引)；height(列表项高度)；offset(列表项底部距列表顶部距离)

方法

refreshView(config = {})

重新渲染列表。config.clearCache为true时清空item-height-getter的缓存值；config.resize为true时对可视列表DOM高度重新取值。

clearCache一般在list发生改变的时候使用，除了push操作不需要(因为只是往数组末尾新增项的话之前缓存值是可以继续使用的)。resize一般在容器高度变化的时候使用。

例子：this.$refs[‘list-vue’].refreshView({ resize: true });

提示

item-height-getter 和 default-item-height 二者必须提供其一，使用 item-height-getter 的同时提供 default-item-height 可得到更好的性能。