github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: virtual-list height reactive (#3972)

pull/4001/head
zkwolf 2021-04-25 13:22:10 +08:00 committed by GitHub
parent 7851c77db3
commit 184f6cac2f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/vc-virtual-list/List.tsx
View File

@ -134,10 +134,11 @@ const List = defineComponent({
// ================================ Height ================================ // ================================ Height ================================
const [setInstance, collectHeight, heights] = useHeights(getKey, null, null); const [setInstance, collectHeight, heights] = useHeights(getKey, null, null);
// ========================== Visible Calculation =========================
const calRes = computed(() => { const calRes = ref();
watchEffect(() => {
if (!useVirtual.value) { if (!useVirtual.value) {
return { calRes.value = {
scrollHeight: undefined, scrollHeight: undefined,
start: 0, start: 0,
end: state.mergedData.length - 1, end: state.mergedData.length - 1,
@ -147,7 +148,7 @@ const List = defineComponent({
// Always use virtual scroll bar in avoid shaking // Always use virtual scroll bar in avoid shaking
if (!inVirtual.value) { if (!inVirtual.value) {
return { calRes.value = {
scrollHeight: fillerInnerRef.value?.offsetHeight || 0, scrollHeight: fillerInnerRef.value?.offsetHeight || 0,
start: 0, start: 0,
end: state.mergedData.length - 1, end: state.mergedData.length - 1,
@ -193,13 +194,14 @@ const List = defineComponent({
// Give cache to improve scroll experience // Give cache to improve scroll experience
endIndex = Math.min(endIndex + 1, state.mergedData.length); endIndex = Math.min(endIndex + 1, state.mergedData.length);
return { calRes.value = {
scrollHeight: itemTop, scrollHeight: itemTop,
start: startIndex, start: startIndex,
end: endIndex, end: endIndex,
offset: startOffset, offset: startOffset,
}; };
}); });
// =============================== In Range =============================== // =============================== In Range ===============================
const maxScrollHeight = computed(() => calRes.value.scrollHeight! - props.height!); const maxScrollHeight = computed(() => calRes.value.scrollHeight! - props.height!);