Virtual list as a list of images when setting createUl:false does not work properly with any other block elements ... :( any ideas or a bug?


#1

I create a list of images cards using virtual list, my virtual list it is a list of images, in this case hotel images loaded with lazy loading with its name and brief information that is over the image, when I click the images I open a new page and load all the rest of the hotel information…

My json of hotels is around 4-8 mbytes maximum…
I was advised to use virtual list for this but there are lot of issues I am having…

Problem!

In the virtual list I am having lot of problems:

  1. When scrolling up or down the images are redrawn all the time and the position of the hotel I am seeing on the viewport after scrolling and stopping changes to another hotel of the list.

  2. If I select one hotel for the list to view its details andI go to the next page, and then go back the hotel I clicked it is not there anymore when back, it is changed to another position of the list.

  3. If I scroll down faster to the bottom sometimes the lazy images stop loading and does not load image anymore even if there are many other images on the list to load…

How to fix all this issues?

  • I tried to modify all the lazy image options but it does not help this issues.
  • I set cache: true or false in the virtual list settings and these problems are still there…

I ended up thinking it is a bug in the virtual list that cannot manage bunch of images in a list but using only text (name of the hotels) in the virtual list the position of the items also change when scrolling up and down and stops or returning back to the list from a page… after trying for more then a week many settings options the problem still the same…

Any help how to make virtual list to work properly with a list of images and avoid virtual list to change the position fo the items all the time when scrolling up or down or when returning from next page to the virtual list again?

I will appreciate any help I think it is a bug! I found no solutions so far…
thanks

here the videos I make showing the problem:

a ) Hotel image position changes when scrolling up and down or when returning from a next page to the virtual list again:

https://mega.nz/#!hQJHhACB!Y-31rceCqHXOatDyjA2jYGds6lgl3vsrs0O9c7sifGA

b) Hotel image redrawn all the time scrolling up and down and scrolling faster to the bottom stops loading the rest of the items with images…

https://mega.nz/#!MVQRnIgI!0RW-LX9ekrg-70_GhG-8ohLusNla8wncuR0A8RrQ0yk

I think if these thins can be fixed if there is bug then it will fix many issues using the virtual list for a list of images or expandable cards that I had same issues and I thought it were the expandable cards but not…

code:

<div class="hotels-list virtual-list"></div>
<script>
  return {
    data: function() {

       var lastItem = app.data.hotels_length;

      var items = [];
      var hotels = app.data.hotels.hotels;

      for (var i = 0; i <= lastItem; i++) {

        items.push({
          id: app.data.hotels.hotels[i].id,
          name: app.data.hotels.hotels[i].name,
          star: app.data.hotels.hotels[i].star,
          image: app.data.hotels.hotels[i].images[0].url,
        });
      }
      return {
        items: items,
        lang: app.data.language
      };
    },
...


      pageInit: function() {
        var self = this;

        self.virtualList = self.$app.virtualList.create({
          // List Element
          el: self.$el.find('.virtual-list'),
          createUl: false,
          cache: false,
          items: self.items,
          itemTemplate:
                '<div ref-hotel="{{../id}}" class="hotel-card lazy demo-lazy" data-background="{{image}}">'+
                '</div>',
          // Item height
          height: 240,
        });


        $(document).on("click", ".hotel-card", function(e) {

          app.views.main.router.navigate("/hotel-details/" + _ref_hotel + "/", {
            reloadCurrent: false,
            pushState: false,
            context: {}
          });

        });


I will appreciate any help to solve this things…
thanks


#2

I think I found some reasons why the virtual list does not work properly when you try to use items that are not contained inside an unordered list < ul >< li >< /li >< /ul >

in my case I needed a list of cards or expandable cards contained inside a < div > so I used the setting:

createUl: false,

so I do not create a

<ul><li></li></ul> 

structure but I create my own… the problem when you want to create my own list using virtual list it is that every item inside the virtual list even if you set createUl: false it seems it must be contained inside the tag < li > to work and be searchable and also for positioning in the list when scrolling up and down or returning from another page to the list…

in my case I set the createUl: false, because I needed to create my own list without using unordered list but It seems this setting does not work properly for this :frowning:

createUl: false,

so ended up to this conclusion, virtual list items needs to be contained inside an unordered list anyway…

so why is this setting for:

createUl: false,

I wonder now, is there a way to create a virtual list without having to use an unordered list and be searchable as well? let us say I want to use < div > instead of < ul >< li >< /li >< /ul > for my items…

is that possible?

I think it will be helpful framework7 must have the posibility to create any type of list like a virtual list but more flexible in the settings to use your own list with any html tags, this will also help to create expandable cards, cards or any list with ease…

I think there is a bug here, when you use your own containers for the list using < div > instead of an unordered list then when you scroll down the list the items to be loaded are not being loaded anymore at the end and you ended up with a white screen and nothing loading :frowning: also the position of the items changes all the time when scrolling up and down or also when returning to the list from another page…

any solution?
thanks


#3

With createUl: false it doesn’t expect ul>li structure and succesfully works with custom elements. If it doesn’t would be good to see minimal JSFiddle with the issue.

If I select one hotel for the list to view its details andI go to the next page, and then go back the hotel I clicked it is not there anymore when back, it is changed to another position of the list.

Because page with Virtual List got removed from DOM i guess. Enable domCache if you need to keep in dom. Or manually store VL scroll position and then call its vl.scrollToItem() method on page load to restore scrolling.

If I scroll down faster to the bottom sometimes the lazy images stop loading and does not load image anymore even if there are many other images on the list to load…

Check the network tab in browser. Maybe there is some issue