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

vue-better-list-view 长列表 / 虚拟列表组件

发布于 2020-09-12 字数 2932 浏览 4616 评论 0

网页数据加载多了都会出现卡顿,手机端的列表一般都是无限加载的,加载的数据量大了我们就需要特殊处理下了,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 引入

<script src="list-view-umd.js"></script>
<script>
    Vue.use(listView);
</script>

用法示例:

<section style="height: 400px;">
    <list-view
        @scroll="listScroll"
        :list="list"
        :item-height-getter="itemHeightGetter"
        :default-item-height="defaultItemHeight"
    >
        <div slot-scope="scope">
            <div>
                NO: {{ scope.item.value }}, height: {{ scope.height }}px
            </div>
        </div>
    </list-view>
</section>

调试:

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 可得到更好的性能。

Github 地址:https://github.com/nossika/vue-better-list-view

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论