About autoHeight Virtual-list

John · April 19, 2023, 5:09am

I am debugging a strange bahaviour of my virtual-lists, but I need to ask another question first.
Why is [data-virtual-list-index] selector here? I can’t see any case this attribute is available. The typical structure is ul>li, So Maybe just find(‘li’)?

github.com

framework7io/framework7/blob/v8/src/core/components/virtual-list/virtual-list-class.js#L190


      
            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 renderedItem = renderedItems[i];
              if (renderedItem) {
                if (!vl.heightsCalculated.includes(i)) {
                  vl.heights[i] = renderedItem.offsetHeight;
                  vl.heightsCalculated.push(i);
                }
              }

For now, the code always ends up to vl.heights[i] = 40; instead of enderedItem.offsetHeight.

github.com

framework7io/framework7/blob/b22a72071a64d810716f9389e7a8424b9ab579a2/src/core/components/virtual-list/virtual-list-class.js#L202


      
            });
            for (let i = 0; i < items.length; i += 1) {
              const renderedItem = renderedItems[i];
              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;

thanks.

deejay · April 19, 2023, 10:33am

not necessarily.

what if it’s not li, what if it’s just p? (or anything)

just add data-virtual-list-index to every item:
here => interesting-voice-eywswy - CodeSandbox

John · April 19, 2023, 5:14pm

Thank you your time creating a working demo which solves my problem.

data-virtual-list-index is required for autoHeight Virtual-list to work properly. (I was facing a jumpy scrolling glitch)

However, it is not documented anywhere. If I didn’t dive into the source code, I won’t see it.