intel-xdk - 使用 Intel xdk 中的 Framework 7 虚拟列表为空

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 来加载元素。没有它，它会计算两个索引，例如分页中的跳过和限制，它们都为零。

我有大约 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>'
    });