有时候在项目中出现成千万条数据, 然而没有分页功能, 这个时候把数据直接渲染就会造成页面卡顿, 这个时候我们就可以做下优化, 下面是针对固定高度的简单的长列表进行优化:
思路：只渲染可视区，根据滚动来渲染下一页的数据
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
#box {
border: 1px solid;
overflow-y: scroll;
}
.inside {
position: absolute;
}
.item {
height: 30px;
}
</style>
<div id="box" ref="box">
<div class="outside" ref="outside">
<div class="inside">
<div class="item" v-for="(v,i) in tempArr" :key="i">
{{'内容: ' + v }}
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
arr: [],
tempArr: [],
pageSize: 10,
size: 30, //高度为30px
},
created: function () {
for (let i = 1; i <= 100000; i++) {
this.arr.push(i);
}
document.getElementById("box").style.height =
this.pageSize * this.size + "px";
document.getElementsByClassName("outside")[0].style.height =
this.arr.length * this.size + "px";
this.tempArr = this.arr.slice(0, this.pageSize);
},
mounted: function () {
let boxEl = document.getElementById("box");
boxEl.addEventListener("scroll", this.scrollFun, false);
},
methods: {
scrollFun() {
let scrollTop = document.getElementById("box").scrollTop;
console.info(scrollTop);
// 根据滚动动态计算数据
let start = Math.floor(scrollTop / this.size);
let end = start + this.pageSize;
this.tempArr = this.arr.slice(start, end);
}
},
});
</script>
</body>
</html>
