-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Closed
Description
Describe the bug
autoHeight VirtualList calcs wrong heights when filtered.
- Framework7 version: v6(since autoHeight) to latest
How to reproduce
open the demo and do some searches:
https://codesandbox.io/p/sandbox/upbeat-leaf-k22836?file=%2Fsrc%2Fjs%2Fapp.js&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A19%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A19%7D%5D
code fix suggestion
const renderedItem = renderedItems[i]; |
The
i
here should be replaced with value of data-virtual-list-index
to fix the problem.
I've tried injecting this function in my demo app. it seems the problem can be fixed.
Framework7.VirtualList.prototype.setListSize = function(autoHeightRerender) {
const vl = this;
const items = vl.filteredItems || vl.items;
if (!autoHeightRerender) {
vl.pageHeight = vl.$scrollableParentEl[0].offsetHeight;
}
if (vl.dynamicHeight) {
vl.listHeight = 0;
vl.heights = [];
for (let i = 0; i < items.length; i += 1) {
const itemHeight = vl.params.height(items[i]);
vl.listHeight += itemHeight;
vl.heights.push(itemHeight);
}
} else if (vl.autoHeight) {
vl.listHeight = 0;
if (!vl.heights) vl.heights = [];
if (!vl.heightsCalculated) vl.heightsCalculated = [];
const renderedItems = {};
vl.$itemsWrapEl.find(`[data-virtual-list-index]`).forEach((el) => {
renderedItems[parseInt(el.getAttribute('data-virtual-list-index'), 10)] = el;
});
for (let i = 0; i < items.length; i += 1) {
const virtualListIndex = items[i].virtualListIndex; // <<<<<<<<<<
const renderedItem = renderedItems[virtualListIndex]; // <<<<<<<<
if (renderedItem) {
if (!vl.heightsCalculated.includes(i)) {
vl.heights[i] = renderedItem.offsetHeight;
vl.heightsCalculated.push(i);
}
}
if (typeof vl.heights[i] === 'undefined') {
vl.heights[i] = 40;
}
vl.listHeight += vl.heights[i];
}
} else {
vl.listHeight = Math.ceil(items.length / vl.params.cols) * vl.params.height;
vl.rowsPerScreen = Math.ceil(vl.pageHeight / vl.params.height);
vl.rowsBefore = vl.params.rowsBefore || vl.rowsPerScreen * 2;
vl.rowsAfter = vl.params.rowsAfter || vl.rowsPerScreen;
vl.rowsToRender = vl.rowsPerScreen + vl.rowsBefore + vl.rowsAfter;
vl.maxBufferHeight = (vl.rowsBefore / 2) * vl.params.height;
}
if (vl.updatableScroll || vl.params.setListHeight) {
vl.$itemsWrapEl.css({ height: `${vl.listHeight}px` });
}
}
However, data-virtual-list-index
in items
is only available in my program, so this may need to be rewritten.
Metadata
Metadata
Assignees
Labels
No labels