Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-14290

iOS: ListView: scrollToItem lags with large lists

    Details

      Description

      Problem
      When using scrollToItem with larger lists, where the rows consist of more then 5 labels or views, scrolling starts only after a delay of approximately two seconds. This delay increases with the number of rows that have to be scrolled.

      Steps to reproduce
      1. Create a new Default Alloy Project and drop in the code below
      2. Run on iPhone 4 or equivalent device
      3. Tap Up/Down (anim)
      4. Observe that there is a delay before scrolling begins

      listView.js

      var myTemplate = {
          childTemplates: [
              {                     
                  type: 'Ti.UI.Label',
                  bindId: 'one',      
                  properties: {       
                      color: 'black',
                      font: { fontFamily:'Arial', fontSize: '14dp' },
                      left: '10dp'
                  }
              },
              {                         
                  type: 'Ti.UI.Label',  
                  bindId: 'two',      
                  properties: {        
                      color: 'black',
                      font: { fontFamily:'Arial', fontSize: '14dp' },
                      left: '50dp'
                  }
              },
              {                        
                  type: 'Ti.UI.Label', 
                  bindId: 'three',   
                  properties: {        
                      color: 'gray',
                      font: { fontFamily:'Arial', fontSize: '14dp' },
                      left: '90dp'
                  }
              },
              {                        
                  type: 'Ti.UI.Label', 
                  bindId: 'four',   
                  properties: {        
                      color: 'gray',
                      font: { fontFamily:'Arial', fontSize: '14dp' },
                      left: '130dp'
                  }
              },
              {                        
                  type: 'Ti.UI.Label', 
                  bindId: 'five',   
                  properties: {        
                      color: 'gray',
                      font: { fontFamily:'Arial', fontSize: '14dp' },
                      left: '170dp'
                  }
              },
              {                        
                  type: 'Ti.UI.Label', 
                  bindId: 'six',   
                  properties: {        
                      color: 'gray',
                      font: { fontFamily:'Arial', fontSize: '14dp' },
                      left: '210dp'
                  }
              },
              {                        
                  type: 'Ti.UI.Label', 
                  bindId: 'seven',   
                  properties: {        
                      color: 'gray',
                      font: { fontFamily:'Arial', fontSize: '14dp' },
                      left: '240dp'
                  }
              }
          ]
      };
       
      var upa = function() {
          $.list.scrollToItem(0, 0, {position: Titanium.UI.iPhone.TableViewScrollPosition.TOP});  
      }
       
      var downa = function() {
          $.list.scrollToItem(3, 0, {position: Titanium.UI.iPhone.TableViewScrollPosition.TOP});  
      }
       
      var up = function() {
          $.list.scrollToItem(0, 0, {animated: false, position: Titanium.UI.iPhone.TableViewScrollPosition.TOP}); 
      }
       
      var down = function() {
          $.list.scrollToItem(3, 0, {animated: false, position: Titanium.UI.iPhone.TableViewScrollPosition.TOP}); 
      }
       
       
      var genData = function(section) {
          var data = [];
          for(i=0;i<20;i++) {
              data.push({one:{text:section + ' one'}, two:{text: 'two'}, three:{text: 'three'}, four:{text: 'four'}, five:{text: 'five'}, six:{text: 'six'}, seven:{text: 'seven'}, template: 'template'})
          }
       
          return data;
      }
       
      var genSections = function() {
          var sections = [];
          for(j=0;j<5;j++) {
              var section = Ti.UI.createListSection({headerTitle:'Section '+j});
              section.setItems(genData(j));
              sections.push(section);
          }
       
          return sections;
      }
       
      var listView = $.list;
      listView.templates = { 'template': myTemplate };
      listView.setSections(genSections());
       
      $.index.open();
      

      index.xml

      <Alloy>
      	<Window>
              <View id="listView">
                  <ListView id="list"/>
                  <View id="buttons">
                      <Button onClick="upa">Up (anim)</Button>
                      <Button onClick="downa">Down (anim)</Button>
                      <Button onClick="up">Up</Button>
                      <Button onClick="down">Down</Button>
                  </View>
              </View>
          </Window>
      </Alloy>
      

      index.tss

      "#listView": {
          backgroundColor: "white"
      }
       
      "#list" : {
          height: 420,
          top: 0
      }
       
      "#buttons": {
          backgroundColor: "gray",
          bottom:0,
          height:40,
          layout: 'horizontal'
      }
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                vduggal Vishal Duggal (Inactive)
                Reporter:
                jcaff Joe Caff
                Reviewer:
                Sabil Rahim
              • Watchers:
                0 Start watching this issue

                Dates

                • Due:
                  Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-16787
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Source Code