在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

我遇到恰与英特尔XDK同样的问题和框架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>' 
    });