Using VirtualList without a list


#1

I’ve been playing around with the Virtual List and could only make the VL render the items into a list. Is there a way to render VL items not as list item but as any other component, eg. Cards? If the height of each item is defined, there should be no problem with scrolling, right?

 var virtualList = app.virtualList.create({
         el: '.virtual-list',   
         items: itemsFromJson,
         itemTemplate:     '<div class="card">'+
     '{{entryTitle}}'+
     '</div>',
         height: 50vw
 )};

#2

Hi,

I have implemented something similar but in my case it later appeared to be wrong approach… Scenario: Listing a tone of articles in component, later got a request from the client to insert DFP randomly (for ex. after 50th article and after 120 articles). As DFP has predefined dimensions I had to create empty el (for ex. div) same height as articles and integrate DFP data inside of it…

Anyway, you can achieve what you requested with something like:

export default {
    data() {
	  const hH = (screen.width - 20) * 0.6; //I have defined my cards to be responsive (100%w:60%h), and here I calculated it, please note "-20" is for card margins (10px on left and right)  
      return {
	    items: [],
	    hH, //one card size
	    vlData: {
          items: [],
        },

and later…

<f7-list
      class="searchbar-found VL"
      medial-list
      virtual-list
      :virtual-list-params="{ items, searchAll, renderExternal, height:hH, rowsBefore:10, rowsAfter: 15, setListHeight:false}"
    >
<li v-for="(item, index) in vlData.items" :key="index" :style="`top: ${vlData.topPosition}px`">

Hope it is at least a little help


#3

Yes, it is possible, check the createUl parameter http://framework7.io/docs/virtual-list.html#virtual-list-parameters


#4

Thanks! Just what I’m looking for.