钛用tableviewrow显示数百行答案

【问题标题】：titanium display hundreds of rows with tableviewrow钛用tableviewrow显示数百行
【发布时间】：2014-01-22 16:10:31
【问题描述】：

使用these lines of code 我可以在tableview 中显示大约数百个tableviewrows。问题是窗口在 3 秒后打开（Android 设备）。我想我必须做一些优化才能在不到 1 秒的时间内显示表格。

有什么建议吗？提前致谢

编辑代码行数

module.exports.draw = function(){
        els = [];
        var cocktails = Ti.App.cocktails;

        for(var i=0;i<cocktails.length;i++){
                els.push({
                        type: 'Ti.UI.View',
                        searchableText : cocktails[i].nome,
                        properties : {
                            cocktail_id:cocktails[i].id,
                            borderColor:"#eee",
                            borderWidth: 1,
                        height: 100,
                        nome:cocktails[i].nome
                        },
                        childTemplates : [
                                {
                                        type: 'Ti.UI.Label',
                                        bindId : cocktails[i].id,
                                        properties : {
                                           text: cocktails[i].nome,
                                           cocktail_id:cocktails[i].id,
                                           color:"#000",
                                           left:30,
                                           zIndex:10,
                                           top:10,
                                           font:{
                                                fontSize:20,
                                                fontWeight:'bold'
                                           }                   
                                        },
                                        events : {
                                                click : function(e) {
                                                        Ti.App.fireEvent("render",{pag:'prepare',id:e.bindId});
                                                }
                                        }
                                },
                                {
                                        type : 'Ti.UI.Label',
                                        properties : {
                                                left:30,
                                                color:"#999",
                                                top:50,
                                                cocktail_id:cocktails[i].id,
                                                text:cocktails[i].ingTxt != undefined?cocktails[i].ingTxt:''   
                                        },
                                        bindId:cocktails[i].id,
                                        events : {
                                                click : function (e){
                                                        Ti.App.fireEvent("render",{pag:'prepare',id:e.bindId});
                                                }
                                        }
                                }
                        ]
                });
        }
    var search = Ti.UI.createSearchBar({
                height:50,
                width:'100%'
        });
        search.addEventListener('cancel', function(){
            search.blur();
        });
        var content = Ti.UI.createListView({sections:[Ti.UI.createListSection({items: els})],searchView:search});
        search.addEventListener('change', function(e){
        content.searchText = e.value;
    });
        return content;
};

【问题讨论】：

标签： titanium appcelerator titanium-mobile appcelerator-mobile

【解决方案1】：

您需要研究延迟加载 http://www.appcelerator.com/blog/2013/06/quick-tip-cross-platform-tableview-lazy-loading/

【讨论】：

【解决方案2】：

正如thiswayup 建议的那样，延迟加载可能是一个非常好的主意。

如果你不想使用延迟加载，你可以这样做：

function getListWindow( items ) {
   var firstLayout = true;

   var win = Ti.UI.createWindow({
      //Your properties here.
   });

   var list = Ti.UI.createTableView({
      data : [],
      //other properties here
   });
   win.add(list);

   win.addEventListener('postlayout', function() {
      if(firstLayout) {
         firstLayout = false;

         var rows = [];

         //Assuming the items argument is an array.
         items.forEach(function( item ) {
            rows.push( Ti.UI.createTableViewRow({
               //Properties here based on item
            }));
         });

         list.data = rows;
      }
   });

   return win;
}

这样做会立即打开您的窗口并在窗口显示后加载行。在生成行时显示加载器可能是个好主意。

【讨论】：