实现原生的虚拟列表

最新推荐文章于 2024-08-20 10:25:59 发布

每天进步亿点点&&

最新推荐文章于 2024-08-20 10:25:59 发布

阅读量113

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_74418779/article/details/129115231

版权

该文章介绍了一种使用Vue.js处理大量数据列表的方法，通过设置div高度和overflow属性实现滚动条，监听滚动事件动态计算可视区域内数据并进行渲染，优化性能。

摘要由CSDN通过智能技术生成

思路如下:
(1)给一个div设置高度，并且设置overflow:auto；
(2)给每行数据设置行高，并且计算一个页面内最多可以展现多少条数据num;
(3)监听鼠标滚动事件，计算鼠标滚动条的卷积高度scrollTop，并且计算对应的索引（scrollTop/行高)；
(4)计算结束索引（起始索引+num);
(5)根据起始索引和结束索引筛选出对应的数据（使用数组slice方法)；
具体实现代码:

// html
<template>
<div :style="{height: `${contentHeight}px`}" class="content_box" @scroll="scroll"> 
  <div :style="{'height': `${itemHeight*(listAll.length)}px`, 'position': 'relative'}">
    <div :style="{'position': 'absolute', 'top': `${top}px`}"> 
        <div v-for="(item,index) in showList" class="item"> {{item}}</div>   
    </div>
  </div>   
</div>
</template>
// js
export default {
    name: "list",
    data(){
        return{
            listAll: [],  //所有数据
            showList: [],  //可视区域显示的数据
            contentHeight: 500,  //可视区域高度
            itemHeight: 30,      //每条数据所占高度
            showNum: 0,  //可是区域显示的最大条数
            top: 0, //偏移量
            scrollTop: 0,  //卷起的高度
            startIndex: 0,  //可视区域第一条数据的索引
            endIndex: 0,  //可视区域最后一条数据后面那条数据的的索引，因为后面要用slice(start,end)方法取需要的数据，但是slice规定end对应数据不包含在里面
        }
    },
    methods:{
        //构造10万条数据
        getList(){
            for(let i=0;i<100000;i++){
                this.listAll.push(`我是第${i}条数据呀`)
            }
        },
        //计算可视区域数据
        getShowList(){
            this.showNum = Math.ceil(this.contentHeight/this.itemHeight);  //可视区域最多出现的数据条数，值是小数的话往上取整，因为极端情况是第一条和最后一条都只显示一部分
            this.startIndex = Math.floor(this.scrollTop/this.itemHeight);   //可视区域第一条数据的索引
            this.endIndex = this.startIndex + this.showNum;   //可视区域最后一条数据的后面那条数据的索引
            this.showList = this.listAll.slice(this.startIndex, this.endIndex)  //可视区域显示的数据，即最后要渲染的数据。实际的数据索引是从this.startIndex到this.endIndex-1
            const offsetY = this.scrollTop - (this.scrollTop % this.itemHeight);  //在这需要获得一个可以被itemHeight整除的数来作为item的偏移量，这样随机滑动时第一条数据都是完整显示的
            this.top = offsetY;
        },
        //监听滚动事件，实时计算scrollTop
        scroll(){
            this.scrollTop = document.querySelector('.content_box').scrollTop;  //element.scrollTop方法可以获取到卷起的高度
            this.getShowList();
        }
 },
    mounted() {
        this.getList();
        this.scroll();
    }
}
</script>
// style
<style scoped>
.content_box{
    overflow: auto;  /*只有这行代码写了，内容超出高度才会出现滚动条*/
    width: 700px;
    border: 1px solid red;
}
/*每条数据的样式*/
.item{
    height:30px;
    padding: 5px;
    color: #666;
    box-sizing: border-box;
}
</style>