Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: virtual-list height reactive #3972

Merged
merged 1 commit into from
Apr 25, 2021
Merged

fix: virtual-list height reactive #3972

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions components/vc-virtual-list/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,11 @@ const List = defineComponent({

// ================================ Height ================================
const [setInstance, collectHeight, heights] = useHeights(getKey, null, null);
// ========================== Visible Calculation =========================
const calRes = computed(() => {

const calRes = ref();
watchEffect(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

计算属性应该可以啊 怎么丢失响应式了呢

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

原理大概是在下拉close状态下，获取到的那个inner的offsetHeight是0，打开以后因为依赖没更新，所以computed的结果也不会更新，有其他的好办法解决吗

if (!useVirtual.value) {
return {
calRes.value = {
scrollHeight: undefined,
start: 0,
end: state.mergedData.length - 1,
Expand All @@ -147,7 +148,7 @@ const List = defineComponent({

// Always use virtual scroll bar in avoid shaking
if (!inVirtual.value) {
return {
calRes.value = {
scrollHeight: fillerInnerRef.value?.offsetHeight || 0,
start: 0,
end: state.mergedData.length - 1,
Expand Down Expand Up @@ -193,13 +194,14 @@ const List = defineComponent({

// Give cache to improve scroll experience
endIndex = Math.min(endIndex + 1, state.mergedData.length);
return {
calRes.value = {
scrollHeight: itemTop,
start: startIndex,
end: endIndex,
offset: startOffset,
};
});

// =============================== In Range ===============================
const maxScrollHeight = computed(() => calRes.value.scrollHeight! - props.height!);

Expand Down