虚拟滚动的理解
既可以滚动加载，也不会额外增加DOM数量，随着滚动变化原有几个DOM元素的值
思考
1. 容器该如何布局 ？
2. 如何动态变化可视区域内dom的值 ？
3. 滚动条的长度如何控制？
4. 如何判断上拉触底了 ？
列表容器的布局
1. 新建一个组件ListScroll，容器内部含：滚动条盒子、展示的列表盒子、加载提示盒子
2. 注意最外层的容器viewport高度设置100%，让父组件去决定ListScroll组件的高度
3. 注意让展示的列表盒子绝对定位铺满容器viewport，滚动条的盒子高度需要动态计算
4. 监听容器viewport的滚动，要动态设置列表盒子的translateY属性，让盒子往上移动
动态变化展示数量内的dom元素的值
1. 涉及到的元素的几何属性：容器的viewport的offsetHeight高度，容器的viewport的scrollTop滚动的高度
2. 这个方案需要设置每行数据的高度的 rowHeight
3. 定义startIndex和endIndex，用来截取数据的
4. 通过容器的viewport的scrollTop滚动的高度 / 每行的高度，能获得当前的startIndex
5. 列表展示的数据，是展示源数据通过startIndex和endIndex截取后的数据
滚动条的长度
滚动条的长度 = 源数据的长度 * 每行的高度
判断上拉触底
监听滚动时，当容器的viewport的offsetHeight高度 + 容器的viewport的scrollTop滚动的高度 等于 列表的总长度 则表示触底了
完整代码的实现
ListScroll组件
// components/ListScroll.vue
<template>
<div class="viewport" ref="viewport" @scroll="onScroll">
<!-- 滚动条 -->
<div class="scrollbar" :style="{height: listHeight + 'px'}"></div>
<!-- 展示的列表 -->
<div class="list" ref="list" :style="{ transform: `translateY(${transformOffset}px)` }">
<div class="row" :style="{height: rowHeight + 'px'}" v-for="(item, index) in showList" :key="index">
<slot :record="item"></slot>
</div>
</div>
<!-- 加载 -->
<div class="loading_wrap" v-show="loading">
<div class="loading">
<div class="container"></div>
</div>
<div>正在加载中</div>
</div>
</div>
</template>
<script>
export default {
props: {
// 数据源
list: {
type: Array,
default: () => []
},
// 每行的高度
rowHeight: {
type: Number,
default: 200
},
// 显示数量
viewCount: {
type: Number,
default: 10
},
// 控制loading
loading: {
type: Boolean,
default: false
}
},
data () {
return {
viewHeight: 0, // 可视区域的高度
startIndex: 0, // 开始索引
endIndex: 0, // 结束索引
transformOffset: 0, // 列表的偏移量
isLoading: false // 控制loading
}
},
mounted () {
this.initData()
},
computed: {
// 展示的数据
showList () {
return this.list.slice(this.startIndex, this.endIndex)
},
// 列表的总高度
listHeight () {
return this.list.length * this.rowHeight
}
},
methods: {
// 初始化一些数据
initData () {
this.endIndex = this.viewCount
this.viewHeight = this.$refs.viewport.offsetHeight
},
// 列表滚动
onScroll () {
const scrollTop = this.$refs.viewport.scrollTop // 获取试图往上滚动的高度
const currentIndex = Math.floor(scrollTop / this.rowHeight) // 计算当前的索引
// 只在需要变化的时 才重新赋值
if (this.startIndex !== currentIndex) {
this.startIndex = currentIndex
this.endIndex = this.startIndex + this.viewCount// 结束索引
this.transformOffset = scrollTop - (scrollTop % this.rowHeight)
}
// 触底了
if ((this.viewHeight + scrollTop) === this.listHeight) {
// 发送触底加载事件
this.$emit('bottomLoad')
}
}
}
}
</script>
<style lang="less" scoped>
/*
------最外层容器---------*/
.viewport {
width: 100%;
height: 100%; // 这个的高度让父组件去决定
background-color: #fff;
position: relative;
overflow-y: auto;
}
/*
------列表展示层容器---------*/
.list {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/*
------每行容器---------*/
.row {
overflow: hidden;
}
/*
------loading样式---------*/
.loading_wrap {
display: flex;
justify-content: center;
align-items: center;
color: #999;
padding: 20px 0;
.loading {
box-sizing: border-box;
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-radius: 50%;
animation: rotate 1s linear infinite;
margin-right: 10px;
}
.container {
position: relative;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: #fff;
}
}
/*
------loading动画---------*/
@keyframes rotate {
from {
transform-origin: center center;
transform: rotate(0deg);
}
to {
transform-origin: center center;
transform: rotate(360deg);
}
}
</style>页面引入ListScroll组件
<template>
<div class="page">
<h3>长列表渲染</h3>
<ListScroll
class="list_scroll"
:list="listData"
:loading="isLoading"
@bottomLoad="onBottomLoad">
<template v-slot="{ record }">
<div class="row_content" @click="handleClick(record)">
<div>{
{ record }}</div>
<img class="image" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2076f7ae-d134-4dc4-a865-af1b2029d400%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1680249943&t=7646a71b62c810256a2b414e96106808" />
</div>
</template>
</ListScroll>
</div>
</template>
<script>
import ListScroll from '@/components/ListScroll.vue'
export default {
data () {
return {
listData: [], // 总数据
isLoading: false // 展示loading
}
},
mounted () {
this.getListData()
},
components: {
ListScroll
},
methods: {
// 获取数据
getListData () {
const count = 20 + this.listData.length
const start = this.listData.length
this.isLoading = true
setTimeout(() => {
for (let i = start; i < count; i++) {
this.listData.push(i)
}
this.isLoading = false
}, 500)
},
// 监听触底事件
onBottomLoad () {
console.log('触底了')
if (this.listData.length >= 100) {
console.log('数据加载完了～')
return
}
// 加载数据
this.getListData()
},
// 监听点击每行
handleClick (record) {
console.log(record, 'record')
}
}
}
</script>
<style lang="less" scoped>
.page {
display: flex;
flex-direction: column;
height: 100vh;
.list_scroll {
flex: 1;
}
}
.row_content {
width: 100%;
height: 100%;
.image {
display: block;
width: 300px;
height: 160px;
object-fit: cover;
}
}
</style>总结
个人感觉这种长列表虚拟滚动的方案，也是很适用于平常的列表触底加载业务，以往很多同学都是通过pageSize设置为10来只先渲染10条数据，导致频繁的的下拉会多次发送请求。通过这种方案，我们可以一次性先获取50条的数据，但是控制只在页面展示10个DOM元素，这是不是也巧妙的减少了发送请求获取数据的次数了呢 ？