vue-better-list-view v0.1.1
vue-better-list-view
vue长列表按需渲染，DEMO
使用
提供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>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可得到更好的性能。