intel-xdk - Virtual list is empty using Framework 7 in intel xdk

Question

I am using a virtual list everything works fine if I initialize and render it using onclick button event. However, I need this list to be initialized and rendered on creating a certain page, when I do so the list items are empty.

   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 オプションが必要であることがわかりました。それがなければ、ページネーションのスキップと制限のように、両方ともゼロである 2 つのインデックスを計算します。

私は約 2300 の配列要素を持っているので、rowsAfter を 40 に設定しますが、要素が 3 つしかない場合は、次のように 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>'
    });