vue3中开发一个不定高的虚拟滚动组件

开发虚拟滚动的不定高组件
开发的过程中我们只要处理一个问题即可。renderList，即渲染的数据列表
我们带着如何获取renderList这个问题去进行逻辑梳理
首先组件内部接收两个值，渲染的数据和每一项的高度

const {list, itemHeight} = defineProps({
  list: { // 渲染的数据
    type: Array,
    default: () => [],
  },
  itemHeight: { // 预估每一项的高度
    type: Number,
    default: 100,
  },
})

我们先去计算renderList（页面可视区域渲染的列表）

const renderList = computed(() => list.slice(startIndex.value, endIndex.value))

想要获取renderList需要知道页面可视区域的第一条数据和最后一条数据的下标，初始化的时候，startIndex 的值为0.，随着滚动更新startIndex，endIndex的值为startIndex+renderCount（可视区域的数量）；所以我们的代码如下：

const renderCount = computed(() => Math.ceil(containerHeight.value/itemHeight))
const endIndex = computed(() => startIndex.value + renderCount.value)

其中的containerHeight为可视区域的高度：

containerHeight.value = containerRef.value.clientHeight || 0;

因为以上的renderList是我们根据预估的高度来进行计算的，我们要想得到真实的renderList，需要获取到真实的高度
获取startIndex我们需要根据列表的每项的真实高度来计算startIndex的值，我们定义一个变量来存储每项的下标（index）、top、bottom和height。

const position = ref([]);
function initPosition() {
	position.value = [];
	list.forEach((d, i) => {
		position.value.push({
			index: i,
			height: itemHeight,
			top: i * itemHeight,
			bottom: (i + 1) * itemHeight,
		});
	});
}

每次获取到list数据以后我们初始化position。

watch(() => list, () => {
	initPosition();
},{
	immediate: true
})

此时获取的都是最小高度，我们获取真实高度的时候要等页面上渲染以后才能获取到，所以我们要等页面更新完dom以后进行更新：

<template>
	<div ref="containerRef" class="container" @scroll="handleScroll">
		<div class="container-list" :style="scrollStyle" ref="listRef">
			<div class="container-list-item" v-for="item in renderList" :key="item.index" :itemid="item.index">
				{{ item.index }}{{ item.content  }}
			</div>

		</div>

	</div>
</template>
<script setup>
onUpdated(() => {
	updatePosition();
})
function updatePosition(){
	//获取listRef下的子元素
  const nodes = listRef.value ? listRef.value.children : [];
	if(!nodes?.length) return;
	const data = [...nodes];
	// 遍历所有的子元素更新真实的高度
	data.forEach(el => {
		let index = +el.getAttribute('itemid');
		const realHeight = el.getBoundingClientRect().height;
		// 判断默认的高度和真实的高度之差
		let diffVal = position.value[index].height - realHeight;
		if (diffVal !== 0) {
			for(let i = index; i < position.value.length; i++) {
				position.value[i].height = realHeight;
				position.value[i].top = position.value[i].top - diffVal;
				position.value[i].bottom = position.value[i].bottom - diffVal;
			}
		}
	})
}
</script>

代码中的itemid为完整数据的下标，保存下来更新position的的值的时候会用到。

获取到真实的高度以后我们就能计算startIndex了,如果item.bottom > scrollTop （滚动的高度）&& item.top <= scrollTop则，当前数据为可视区域的第一项，因为position中的bottom的值是递增的，我们只需要找到第一个bottom > scrollTop的值的下标即可，position.value.findIndex(item => item.bottom > scrollTop)。
使用二分法查找进行优化：

function handleScroll(e) {
	const scrollTop = e.target.scrollTop;
	startIndex.value = getStartIndex(scrollTop);
}
// 优化前
function getStartIndex(scrollTop) {
	return position.value.findIndex(item => item.bottom > scrollTop)
}
// 优化后
const getStartIndex = (scrollTop) => {
	let left = 0;
	let right = position.value.length - 1;
	while (left <= right) {
		const mid = Math.floor((left + right) / 2);
		if(position.value[mid].bottom == scrollTop) {
			return mid + 1;
		} else if (position.value[mid].bottom > scrollTop) {
			right = mid - 1;
		} else if (position.value[mid].bottom < scrollTop) {
			left = mid + 1;
		}
	}
	return left;
}

至此我们就获取到了我们需要的renderList，我们只需要给list容易写上样式即可，list的高度为：position的最后一项的bottom-滚动卷上去的高度，其中卷上去的高度为可视区域第一项的top值。

// 卷上去的高度
const scrollTop = computed(()=> startIndex.value > 0 ? position.value[startIndex.value-1].bottom : 0);
// list元素的整体高度
const listHeight = computed(() => position.value[position.value.length - 1].bottom);
const scrollStyle = computed(() => {
	return {
		height:`${listHeight.value - scrollTop.value}px`,
		transform: `translate3d(0, ${scrollTop.value}px, 0)`,
	}
})

完整代码：
父组件：

<template>
	<div class="virtual-scroll">
		<Viru :list="list" :item-size="50"/>
	</div>
</template>
<script setup>
import { getListData } from './data';
import { ref } from 'vue';
import Viru from './virtualUnfixedList.vue';
/**
 * list格式为：
 * [
 *   {
 *      index: 1,
 *      conten: 'xxx'
 *   },
 *   {
 *      index: 2,
 *      content: 'xxx'
 *   }
 * ]
 */
const list = ref(getListData());
</script>
<style lang="scss" scoped>
.virtual-scroll {
	height: 500px; 
	width: 500px;
	border: 1px solid red;
}

</style>

子组件：

<template>
	<div ref="containerRef" class="container" @scroll="handleScroll">
		<div class="container-list" :style="scrollStyle" ref="listRef">
			<div class="container-list-item" v-for="item in renderList" :key="item.index" :itemid="item.index">
				{{ item.index }}{{ item.content  }}
			</div>

		</div>

	</div>
</template>
<script setup>
import { ref, computed, watch, onMounted, onUpdated } from 'vue'

const {list, itemHeight} = defineProps({
  list: { // 渲染的数据
    type: Array,
    default: () => [],
  },
  itemHeight: { // 预估每一项的高度
    type: Number,
    default: 100,
  },
})
const containerRef = ref(null);
const listRef = ref(null);
const startIndex = ref(0);
const containerHeight = ref(0);
const position = ref([]);

const scrollTop = computed(()=> startIndex.value > 0 ? position.value[startIndex.value-1].bottom : 0);
const listHeight = computed(() => position.value[position.value.length - 1].bottom);

const scrollStyle = computed(() => {
	return {
		height:`${listHeight.value - scrollTop.value}px`,
		transform: `translate3d(0, ${scrollTop.value}px, 0)`,
	}
})

const renderCount = computed(() => Math.ceil(containerHeight.value/itemHeight))
const endIndex = computed(() => startIndex.value + renderCount.value)

const renderList = computed(() => {
	return list.slice(startIndex.value, endIndex.value);
})


onMounted(() => {
	containerHeight.value = containerRef.value.clientHeight || 0;
})
onUpdated(() => {
	updatePosition();
})

watch(() => list, () => {
	initPosition();
},{
	immediate: true
})
function initPosition() {
	position.value = [];
	console.log(list);
	list.forEach((d, i) => {
		position.value.push({
			index: i,
			height: itemHeight,
			top: i * itemHeight,
			bottom: (i + 1) * itemHeight,
		});
	});
}
function updatePosition(){
	//获取listRef下的子元素
  const nodes = listRef.value ? listRef.value.children : [];
	if(!nodes?.length) return;
	const data = [...nodes];
	console.log(nodes)
	// 遍历所有的子元素更新真实的高度
	data.forEach(el => {
		let index = +el.getAttribute('itemid');
		const realHeight = el.getBoundingClientRect().height;
		// 判断默认的高度和真实的高度之差
		let diffVal = position.value[index].height - realHeight;
		if (diffVal !== 0) {
			for(let i = index; i < position.value.length; i++) {
				position.value[i].height = realHeight;
				position.value[i].top = position.value[i].top - diffVal;
				position.value[i].bottom = position.value[i].bottom - diffVal;
			}
		}
	})
}
function handleScroll(e) {
	const scrollTop = e.target.scrollTop;
	startIndex.value = getStartIndex(scrollTop);
}

const getStartIndex = (scrollTop) => {
	let left = 0;
	let right = position.value.length - 1;
	while (left <= right) {
		const mid = Math.floor((left + right) / 2);
		if(position.value[mid].bottom == scrollTop) {
			return mid + 1;
		} else if (position.value[mid].bottom > scrollTop) {
			right = mid - 1;
		} else if (position.value[mid].bottom < scrollTop) {
			left = mid + 1;
		}
	}
	return left;
}

</script>
<style scoped lang="scss">
.container {
  width: 100%;
	height: 100%;
  overflow: auto;
  &-list{
    width: 100%;
    &-item{
      width: 100%;
    }
  }
}
</style>