Horizontal virtual list using flexbox

1

I’m trying to create a horizontal virtual-list (using flexbox), like so:

Group

But somehow I can’t get it to work.

<f7-list class="horiz"
  virtual-list
  :virtual-list-params="{ items, searchAll, renderExternal, height:28, createUl:false}"
>
  <f7-list-item class="square" v-for="(itm, idx) in vlData.items" :title="itm.title" :key="idx*1000" :style="`top: ${vlData.topPosition}px`">
     <img class="abc" v-bind:src="itm.path" :alt="itm.name"/>
  </f7-list-item>
</f7-list>

But I don’t know how to initialize the list. What happens is:

  • It shows all items (no virtual list)
  • It shows the first 140 items. (virtual-list, but not correct)
  • It shows a regular list (virtual-list) -> so it’s working, but that’s not what I want :wink:

I can’t figure out how to create a horizontal virtual list.

Any hint?

PS: I also tried by adding a cols: 10 parameter, but that didn’t help.

2

Adding cols parameter + settings these styles on List’s UI element will do the trick:

.horiz ul {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  li {
    width: 10%;
  }
}

But the problem with such layout is that this thing will work slow, as still there are 10x items to render and calc. I would better recommend you to go with rows, by presenting each virtual list item as a single row with 10 cells