Виртуальный список пуст с помощью Framework 7 в intel xdk

Question

Я использую виртуальный список, все работает отлично, если я инициализирую и визуализирую его с помощью события кнопки onclick. Тем не менее, мне нужно, чтобы этот список инициализировался и отображался при создании определенной страницы, когда я делаю это, элементы списка пустые.

var myList = myApp.virtualList('.list-block.virtual-list', { 
    items: 
    [ 
    { 
     title: 'Item 1', 
     picture: 'path/to/picture1.jpg' 
    }, 
    { 
     title: 'Item 2', 
     picture: 'path/to/picture2.jpg' 
    }, 
    { 
     title: 'Item 1000', 
     picture: 'path/to/picture1000.jpg' 
    }, 
    ], 
    template: '<li class="item-content">' + 
        '<div class="item-media"><img src="{{picture}}"></div>' + 
        '<div class="item-inner">' + 
        '<div class="item-title">{{title}}</div>' + 
        '</div>' + 
       '</li>' 
    }); 

Answer 1

я столкнулся с точно такой же проблемой с Intel XDK и виртуального список Framework 7.

После быстрой отладки, я понимаю, что он нужен вариант, rowsAfter, чтобы загрузить элементы. Без этого он вычисляет два индекса, например skip и limit в pagination, которые равны нулю.

У меня есть около 2300 элементов массива поэтому я rowsAfter до 40, но если у вас есть только три элемента, вы можете попробовать с 3 (так он должен показывать элемент 0, 1 и 2), как это:

var myList = myApp.virtualList('.list-block.virtual-list', { 
    items: 
    [ 
    { 
     title: 'Item 1', 
     picture: 'path/to/picture1.jpg' 
    }, 
    { 
     title: 'Item 2', 
     picture: 'path/to/picture2.jpg' 
    }, 
    { 
     title: 'Item 1000', 
     picture: 'path/to/picture1000.jpg' 
    }, 
    ], 
    rowsAfter : 3, 
    template: '<li class="item-content">' + 
        '<div class="item-media"><img src="{{picture}}"></div>' + 
        '<div class="item-inner">' + 
        '<div class="item-title">{{title}}</div>' + 
        '</div>' + 
       '</li>' 
    });