封装一个 虚拟列表渲染 组件

组件代码

<template><div ref="list" class="infinite-list-container" @scroll="scrollEvent($event)"><div class="infinite-list-phantom" :style="{ height: listHeight + 'px' }"></div><div class="infinite-list" :style="{ transform: getTransform }"><div ref="items"class="infinite-list-item" v-for="item in visibleData" :key="item.id":style="{ height: itemSize + 'px',lineHeight: itemSize + 'px' }">{{ item.value }}</div></div></div>
</template><script>
export default {name:'VirtualList',props: {//所有列表数据listData:{type:Array,default:()=>[]},//每项高度itemSize: {type: Number,default:200}},computed:{//列表总高度listHeight(){return this.listData.length * this.itemSize;},//可显示的列表项数visibleCount(){return Math.ceil(this.screenHeight / this.itemSize)},//偏移量对应的stylegetTransform(){return `translate3d(0,${this.startOffset}px,0)`;},//获取真实显示列表数据visibleData(){return this.listData.slice(this.start, Math.min(this.end,this.listData.length));}},mounted() {this.screenHeight = this.$el.clientHeight;this.start = 0;this.end = this.start + this.visibleCount;},data() {return {//可视区域高度screenHeight:0,//偏移量startOffset:0,//起始索引start:0,//结束索引end:null,};},methods: {scrollEvent() {//当前滚动位置let scrollTop = this.$refs.list.scrollTop;//此时的开始索引this.start = Math.floor(scrollTop / this.itemSize);//此时的结束索引this.end = this.start + this.visibleCount;//此时的偏移量this.startOffset = scrollTop - (scrollTop % this.itemSize);}}
};
</script><style scoped>
.infinite-list-container {height: 100%;overflow: auto;position: relative;-webkit-overflow-scrolling: touch;
}.infinite-list-phantom {position: absolute;left: 0;top: 0;right: 0;z-index: -1;
}.infinite-list {left: 0;right: 0;top: 0;position: absolute;text-align: center;
}.infinite-list-item {padding: 10px;color: #555;box-sizing: border-box;border-bottom: 1px solid #999;
}
</style>

使用：

<VirtualList :listData="data" :itemSize="100"/>