鈦顯示數百行tableviewrow

Question

使用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; 
}; 

Answer 1

你需要考慮延遲加載 http://www.appcelerator.com/blog/2013/06/quick-tip-cross-platform-tableview-lazy-loading/

Answer 2

由於thiswayup表明，延遲加載可能會是一個很好的主意。

如果不wan't使用延遲加載，你可以這樣做：

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; 
} 

這樣做會打開你的窗馬上並且所示的窗口後，裝載行。在生成行時顯示加載器可能是一個好主意。