学会前端假造滚动，看这篇就够了 - ToB企服应用市场:ToB评测及商务社交产业平台

<template>
<div class="container">
<my-virtual-scroller :items="list" />
</div>
</template>
<script>
import myVirtualScroller from './myVirtualScroller.vue'
// 模拟一个长列表
const list = []
for(let i=0; i<10000; i++) {
list.push({
id: i,
label: `virtual-list ${i}`
})
}
export default {
components: {
myVirtualScroller
},
data() {
return {
list: list
}
}
}
</script>
<style scoped>
.container {
height: 300px;
border: 1px solid #ccc;
}
</style>

复制代码

// 传入数据可以实现虚拟滚动事件
// 这是一个封装好的子组件传入数组进行渲染
<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
class="infinite-list-item"
v-for="item in visibleData"
:key="item.id"
:style="{ height: itemSize + 'px' }"
>
{{ item.label }}
</div>
</div>
</div>
</template>
<script>
export default {
name: "MyVirtualList",
props: {
//父组件传过来的数据
items: {
type: Array,
default: () => [],
},
//可视区域每一项的高度没有传参的话默认高度是100px
itemSize: {
type: Number,
//没有高度的话高度会默认是100px
default: 100,
},
},
computed: {
//列表总高度
listHeight() {
// 计算当前传值数据的总长度 * 每个盒子的高度计算出所有数据的整体高度
return this.items.length * this.itemSize;
},
//可视区列表的项数
visibleCount() {
return Math.ceil(this.screenHeight / this.itemSize);
},
//可视区列表偏移距离对应的样式
getTransform() {
return `translate3d(0,${this.startOffset}px,0)`;
},
//获取可视区列表数据
visibleData() {
// 截取出可视区域显示的盒子进行渲染
return this.items.slice(
this.start,
Math.min(this.end, this.items.length)
);
},
},
mounted() {
// 获取可是区域的高度
this.screenHeight = this.$refs.list.clientHeight;
// 开始
this.start = 0;
// 结束
this.end = this.start + this.visibleCount;
},
data() {
return {
screenHeight: 0, //可视区域高度
startOffset: 0, //偏移距离
start: 0, //起始索引
end: 0, //结束索引
};
},
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;
}
.infinite-list-phantom {
position: absolute;
left: 0;
top: 0;
right: 0;
}
.infinite-list {
left: 0;
right: 0;
top: 0;
position: absolute;
}
.infinite-list-item {
line-height: 50px;
text-align: center;
color: #555;
border: 1px solid #ccc;
box-sizing: border-box;
}
</style>

复制代码

//此时的偏移距离
this.startOffset = scrollTop - (scrollTop % this.itemSize);

复制代码