Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-14290] iOS: ListView: scrollToItem lags with large lists

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2014-01-02T21:30:49.000+0000
Affected Version/sRelease 3.1.1, Release 3.1.3, Release 3.2.0
Fix Version/s2013 Sprint 26, 2013 Sprint 26 API, Release 3.2.1, Release 3.3.0
ComponentsiOS
Labelsios, listview, module_listview, parity, qe-testadded, scrollToItem, supportTeam
ReporterJoe Caff
AssigneeVishal Duggal
Created2013-06-19T11:39:02.000+0000
Updated2014-02-18T10:33:15.000+0000

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

Comments

  1. Daniel Sefton 2013-06-19

    Tested and confirmed on iPhone 4 device, iOS 6 with Ti SDK 3.1.1 GA.
  2. Mark Mokryn 2013-07-28

  3. Vishal Duggal 2013-12-20

    Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5156
  4. Mark Mokryn 2014-01-03

  5. Vishal Duggal 2014-01-03

    Backport to 3_2_X https://github.com/appcelerator/titanium_mobile/pull/5181
  6. Priya Agarwal 2014-01-07

    I too observed a time lag with 3.1.3.GA on iOS but using Test Environment: Appc-Studio: 3.2.1.201401061716 acs:1.0.11 alloy:1.3.1-beta npm:1.3.2 titanium:3.2.0 titanium-code-processor:1.1.0 Osx: Maverick 10.9 Xcode: xCode 5.0.2 using both sdk build:3.2.1.v20140106195644 and 3.3.0.v20140106195650 App is working fine with above mentioned testCase No more time lag. App runs smoothly
  7. Wilson Luu 2014-01-07

    Closing ticket as fixed. Verified the following: 1. After pressing the Up/Down (anim) buttons, there is no initial delay before scrolling 2. After pressing the Up/Down buttons (animated set to false), listview scrolls as expected i.e. no animation when scrolling 3. Changed the genData function to generate 50 rows and was able to verify the above 2 test cases 4. Used both the Alloy sample code and Titanium classic sample code to verify the above 3 test cases Tested on: Appcelerator Studio, build: 3.2.1.201401061716 SDK build: 3.2.1.v20140106195644, 3.3.0.v20140106195650 CLI: 3.2.0 Alloy: 1.3.1-beta Xcode: 5.0.2 Devices: iphone 4s (6.0.1), iphone 5s (7.0.2) *Note:* Was able to reproduce the original bug with SDK 3.2.0.GA as well.

JSON Source