Infinite Scroll + virtual list

Hello,

I want to use infinite scroll on my virtual list. When my list already has < li > items in the file infinite scroll works fine. But I load my virtual list items after my ajax post and then infinite scroll does not work as it should.

var RecordsInterval = window.setInterval(function(){

        if (typeof LastRecords === 'undefined') {

            LoadLastRecords(sessionid,sessionmeasure);

        } else if (LastRecords === "") {

            $("#view-records .VLViewRecords").html("<p class='text-center' style='margin-top: 15px;'><img src='images/sad_box.png' class='img-xs'/>"+langfile.not_score+"</p>");

            clearInterval(RecordsInterval);

            return false;

        } else {

            clearInterval(RecordsInterval);

            // Virtual List

            var VLViewRecords = app.virtualList.create({

                el: ".VLViewRecords",

                items: $.parseJSON(LastRecords),

                searchAll: function (query, items) {

                    var found = [];

                    for (var i = 0; i < items.length; i++) {

                        if (items[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);

                    }

                    return found;

                },

                itemTemplate:

                '<li>'+

                '<a href="{{url}}" class="item-link item-content">'+

                    '<div class="item-media"><img src="{{img}}" class="badge-mdsmall"></div>'+

                    '<div class="item-inner">'+

                    '<div class="item-title">'+

                        '{{name}}'+

                        '<div class="item-header">{{date}}</div>'+

                    '</div>'+

                    '<div class="item-after">{{score}}</div>'+

                    '</div>'+

                '</a>'+

                '</li>',

                height: 86 // Height of items

            });

            // Infinite Scroll

                // View Records

            // Loading flag

            var allowInfinite = true;

            // Last loaded index

            var lastItemIndex = $$('.VLViewRecords li').length;

            // Max items to load

            var maxItems = 200;

            // Append items per load

            var itemsPerLoad = 3;

            // Attach 'infinite' event handler

            $$('#view-records .infinite-scroll-content').on('infinite', function () {

                // Exit, if loading in progress

                if (!allowInfinite) return;

                // Set loading flag

                allowInfinite = false;

                // Emulate 1s loading

                setTimeout(function () {

                    // Reset loading flag

                    allowInfinite = true;

                    // When max items is reached

                    if (lastItemIndex >= maxItems) {

                    // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings

                    app.infiniteScroll.destroy('#view-records .infinite-scroll-content');

                    // Remove preloader

                    $$('#view-records .infinite-scroll-preloader').remove();

                    return;

                    }

                    // Generate new items HTML

                    var html = '';

                    for (var i = lastItemIndex + 1; i <= lastItemIndex + itemsPerLoad; i++) {

                        html += '<li>'+

                        '<a href="{{url}}" class="item-link item-content">'+

                            '<div class="item-media"><img src="{{img}}" class="badge-mdsmall"></div>'+

                            '<div class="item-inner">'+

                            '<div class="item-title">'+

                                '{{name}}'+

                                '<div class="item-header">{{date}}</div>'+

                            '</div>'+

                            '<div class="item-after">{{score}}</div>'+

                            '</div>'+

                        '</a>'+

                        '</li>';

                    }

                    // Append new items

                    $$('.VLViewRecords ul').append(html);

                    // Update last loaded index

                    lastItemIndex = $$('.VLViewRecords li').length;

                }, 1000);

            });

        }

    }, 1000);

The preloader also doesn’t scroll down:

It looks like infinite scroll is resetting the variable lastItemIndex = $$(’.VLViewRecords li’).length everytime when dynamic content is loaded.

Anyone else facing this issue?

I found it. You need to use the function virtualList.appendItems(items); to append items to a virtual list when you use infinite scroll.

1 Like

Вот для этого нужно добавить key для preloader, чтобы VDOM корректно с ним работал