标签：10 const list 列表 item 万条 后台 数据 page
(1)1.主要技术是应用虚拟列表
2 什么是虚拟列表
虚拟列表就是只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染，以实现减少消耗，提高用户体验的技术。它是长列表的一种优化方案，性能良好。
3 实现思路
（1）写一个代表可视区域的div，固定其高度，通过overflow使其允许纵向 Y 轴滚动。
（2）第二步，计算区域中可以显示的数据条数。这个可以用可视区域的高度除以单条数据高度得到。
（3）监听滚动，当滚动条变化时，计算出被卷起的数据的高度。
（4）计算区域内数据的起始索引，也就是区域内的第一条数据：这个用卷起的高度除以单条数据高度可以拿到。
（5）计算区域内数据的结束索引。通过起始索引+可显示的数据的条数可以拿到。
（6）取起始索引和结束索引中间的数据，渲染到可视区域。
（7）计算起始索引对应的数据在整个列表中的偏移位置并设置到列表上。
整个步骤下来，最终的效果是：不论怎么滚动，我们改变的只是滚动条的高度和可视区的元素内容。每次只会渲染一个固定的条数，不会增加多余元素。
<template>
<div :style="{ height: `${contentHeight}px` }" class="content_box" @scroll="scroll">
<!--这层div是为了把高度撑开，让滚动条出现，height值为所有数据总高-->
<div :style="{ 'height': `${itemHeight * (listAll.length)}px`, 'position': 'relative' }">
<!--可视区域里所有数据的渲染区域-->
<div :style="{ 'position': 'absolute', 'top': `${top}px` }">
<!--单条数据渲染区域-->
<div v-for="item in showList" :key="item.tid" class="item">
<img :src="item.src" alt="" style="width:20px; height:20px">
{{ item.text }}
</div>
</div>
</div>
</div>
</template>
<script>
import request from '@/api';
export default {
data() {
return {
listAll: [], //所有数据
showList: [], //可视区域显示的数据
contentHeight: 500, //可视区域高度
itemHeight: 50, //每条数据所占高度
showNum: 0, //可是区域显示的最大条数
top: 0, //偏移量
scrollTop: 0, //卷起的高度
startIndex: 0, //可视区域第一条数据的索引
endIndex: 0, //可视区域最后一条数据后面那条数据的的索引，因为后面要用slice(start,end)方法取需要的数据，但是slice规定end对应数据不包含在里面
}
},
methods: {
//构造10万条数据
async getList() {
// for(let i=0;i<100000;i++){
// this.listAll.push(`我是第${i}条数据呀`)
// }
const res = await request({ url: '/list', method: 'GET' })
this.listAll=res.data
this.showList=this.listAll.slice(0,10)
},
//计算可视区域数据
getShowList() {
this.showNum = Math.ceil(this.contentHeight / this.itemHeight); //可视区域最多出现的数据条数，值是小数的话往上取整，因为极端情况是第一条和最后一条都只显示一部分
this.startIndex = Math.ceil(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();
}
},
created() {
this.getList()
},
mounted() {
this.scroll();
}
}
</script>
<style scoped>
.content_box {
overflow: auto;
/*只有这行代码写了，内容超出高度才会出现滚动条*/
width: 700px;
border: 1px solid red;
}
/*每条数据的样式*/
.item {
height: 50px;
padding: 5px;
color: #666;
box-sizing: border-box;
}
</style>
(2).1引用分页
查看代码
<!DOCTYPE html>
<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>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
#container {
height: 100vh;
overflow: auto;
}
.item {
display: flex;
padding: 10px;
}
img {
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="container"> </div>
<!-- <script src="./index.js"></script> -->
<script>
// /* 1-直接渲染页面直接卡死 */
// const renderList = async () => {
// console.time('列表时间')
// const { data: list } = await axios.get('http://127.0.0.1:2000/list')
// // 获取container对象
// const container = document.getElementById('container')
// var str = ''
// list.forEach(item => {
// str += `<div class='item'><img src="${item.src}" /><span>${item.text}</span></div>`
// })
// container.innerHTML = str
// console.timeEnd('列表时间')
// }
// renderList()
/* 2-分页渲染 */
const renderList = async () => {
console.time('列表时间')
const { data: list } = await axios.get('http://127.0.0.1:2000/list')
// console.log(list);
const total = list.length // 总条数
const page = 0 // 当前第一页
const limit = 200 // 每页显示200条
const totalPage = Math.ceil(total / limit)// 计算得到总页码数
const render = (page) => {
if (page >= totalPage) return // 表示超出最大页码数或者理解成最后一页
setTimeout(() => {
//每次循环渲染200条
/*
page=0 [0,200]
page=1 [200,400]
...
一直page>总页码数就终止递归次循环
*/
for (let i = page * limit; i < page * limit + limit; i++) {
const item = list[i]// 获取200条中的每一项
const div = document.createElement('div')// 动态创建一个divv元素
div.className = 'item'// 定义一个name
div.innerHTML = `<img src="${item.src}" /><span>阿牛哥：${item.text}</span>` // 给每一项添加属性
container.appendChild(div)
}
render(page + 1)
}, 0)
}
render(page)
console.timeEnd('列表时间')
}
renderList()
</script>
</body>
</html>
标签：10,const,list,列表,item,万条,后台,数据,page 来源： https://www.cnblogs.com/jingxin01/p/16623878.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。