列表虚拟滚动
父组件
<template>
<div>
<virtuaList :listData="list" :itemHeight="20" :visibleCount="30" />
</div>
</template>
<script>
import virtuaList from './components/virtuaList.vue';
export default {
name: "App",
components: {
virtuaList
},
data() {
return {
list:[]
};
},
mounted() {
// 默认数据
for (let i = 1; i < 10000; i++) {
this.list.push(i);
}
},
methods: {}
};
</script>
子组件
<template>
<!--虚拟滚动-->
<div :style="{ height: itemHeight * visibleCount + 'px' }" ref="scrollContainer" class="scrollContainer">
<div :style="{ height:itemHeight * listData.length + 'px'}" class="scrollContent">
</div>
<div ref="listContainer" class="listContainer">
<div v-for="item of slicesList" :style="{ height: itemHeight + 'px' }" :key="item">{{item}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'VirtuaList',
props:
{
listData: {
type: Array,
default: () => [],
},
itemHeight:{
type: Number,
default: 20,
},
visibleCount:
{
type: Number,
default: 20,
},
},
data() {
return {
// 虚拟列表
start: 0, // 截取开始
end: 0, // 截取结束
};
},
computed:{
slicesList(){
return this.listData.slice(this.start,this.end);
}
},
mounted() {
// 结束位置等于可视区域数量
this.end = this.visibleCount;
this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
// 获取滚动条位置
const scrollTop = this.$refs.scrollContainer.scrollTop;
// 计算开始位置
this.start = Math.floor(scrollTop / this.itemHeight);
// 计算结束位置
this.end = this.start + this.visibleCount;
// 设置列表容器位置
this.$refs.listContainer.style.transform = `translateY(${this.start * this.itemHeight}px)`;
},
},
beforeDestroy() {
this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll);
}
};
</script>
<style lang="css" scoped>
.scrollContainer{
width: 300px;
background-color: aquamarine;
position: relative;
margin: 0 auto;
overflow-y: scroll;
}
.scrollContent{
/* 滚动条 */
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
原文地址:https://blog.csdn.net/qq_36405210/article/details/140498601
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!