懒加载列表
对可视区域渲染,对非可视区域不渲染。
只渲染start和end之间的数据,使用translate3d实现在y轴滚动的效果。
终极目标
- 求出在可视区域显示的数据
- 求出滚动列表在y轴的偏移量
- 计算需要的变量
start:起始索引
end:终止索引
offestStart: 在Y轴的偏移量
mounted() {
//元素内部高度
this.screenHeight = this.$el.clientHeight;
this.start = 0;
this.end = this.start + this.visbleCount;
},
computed: {
//总共列表的长度
listHeight() {
return this.listData.length * this.itemHeight;
},
//可视区域的数据
visableData() {
return this.listData.slice(
this.start,
Math.min(this.end, this.listData.length)
);
},
//可视区域中元素的个数
visbleCount() {
return Math.ceil(this.screenHeight / this.itemHeight);
},
//通过css让列表在Y轴偏移
getTransform() {
return `translate3d(0,${this.offestStart}px,0)`;
},
},
- 监听scroll事件
在滚动时,start、end、offsetStart都在变
得到开始和结束位置的索引值=>可视元素的集合,和偏移量=>在y轴需要移动的距离。
scrollHandler() {
//当前滚动位置
let scrollTop = this.$refs.list.clientHeight;
//开始索引
this.start = Math.floor(scrollTop / this.itemHeight);
this.end = this.start + this.visbleCount;
this.offestStart = scrollTop - (scrollTop % this.itemHeight);
},
3.html
<div class="container" @scroll="scrollHandler" ref="list">
<!-- 占位,让内容的高度超出容器的高度,从而产生滚动条 -->
<div
class="wrapper"
:style="{
height: listHeight + 'px',
}"
></div>
<div class="itemScreen" :style="{ transform: getTransform }">
<div
ref="items"
v-for="item in visableData"
:key="item.id"
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }"
>
{{ item.data }}
</div>
</div>
</div>
标签:end,可视,列表,return,start,虚拟,scrollTop
From: https://www.cnblogs.com/poco-o/p/16842179.html