[TIMOB-15101] ScrollableView in ListView's items, causes a bug after the scroll of any ScrollableView

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Invalid
Resolution Date	2013-12-08T20:20:34.000+0000
Affected Version/s	n/a
Fix Version/s	2013 Sprint 25, 2013 Sprint 25 API
Components	iOS
Labels	dev-invalidate, ipass1, listview, scrollableView, scrollablescrollable, triage
Reporter	Vittorio Sorbera
Assignee	Vishal Duggal
Created	2013-09-05T11:08:10.000+0000
Updated	2017-03-28T20:24:43.000+0000

Description

*Problem description* If you use a ScrollableView in a ListView, it has a bug. By default, in every item I show the first image of ScrollableView (currentPage = 0). After the scroll in any one of ScrollableViews, if then I scroll the ListView, many other ScrollableViews will have changed the image. Even if I try to reload the ListView, it will not show the first image of ScrollableView in all items. *Test case* This is a generic code that reproduces the problem:

 
var win = Ti.UI.createWindow();
var remoteImages = true; // false for localImages

//--> UI ELEMENTS
//	-> ListView Template
var itemTemplate = {
    childTemplates: [
        {
            type: 'Ti.UI.View',  
            bindId: 'bgView',  
            properties: { 
				width : "100%",
				height : "100%",
				backgroundColor : "#aabbcc",
				zIndex : 1    
            }       	
        },
        {
            type: 'Ti.UI.ScrollableView',  
            bindId: 'imagesSV',  
            properties: {
				width : "100%",
				height : "210dp",
				showPagingControl : true,
				currentPage : 0,
				zIndex : 2
            }
		}
	]
};

var itemsLV = Ti.UI.createListView({
		top : "50dp",
		bottom : "0dp",
		templates : {'itemTemplate': itemTemplate},
		defaultItemTemplate : 'itemTemplate',
		backgroundColor : "transparent",
		separatorColor : "transparent"
});	


var reloadBtn = Ti.UI.createButton({
	title : "Reload",
	top : "5dp"
});
reloadBtn.addEventListener("click", function(){
	reload();
});

var loadingAI = Ti.UI.createActivityIndicator();
	
var reload = function(){
	
	itemsLV.visible = false;
	itemsLV.sections = [];
	loadingAI.show();
	
	var data = [];
	for(var j=0; j<100; j++){

		var images = [];
		if(remoteImages){
			var imagesUrl = [
				"https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg",
				"http://blogs.dallasobserver.com/sportatorium/No.%202.png",
				"http://dt1lqdui5w8vj.cloudfront.net/9/images/badge3.png",
				"http://www.tanialuiz.com/tania/images/stories/virtuemart/product/661dd600899aee2c6b69060aabcf54ab.png",
				"https://si0.twimg.com/profile_images/2797666136/a7030f51e405cde3684cb7bc46107736.png",
				"http://www.i2symbol.com/images/symbols/style-digits/circled_digit_six_u2465_icon_256x256.png"
			];
		}else{
			var imagesUrl = [
				"/KS_nav_views.png",
				"/KS_nav_ui.png",
				"/KS_nav_views.png",
				"/KS_nav_ui.png",
				"/KS_nav_views.png",
				"/KS_nav_ui.png"
			];			
		};
		
		for(var i in imagesUrl){
			images.push(Ti.UI.createImageView({
				image : imagesUrl[i],
				defaultImage : "/KS_nav_views.png"
			}));
		};
		
	    data.push({
	        properties : {
	            itemId: 'image n. ' + (i + 1),
	            accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE,
				selectionStyle : Ti.UI.iPhone.ListViewCellSelectionStyle.NONE,
				height : "210dp"
	        },
	        bgView : {},
	        imagesSV :{
	        	views : images,
	        	currentPage : 0
       		}
	    });
	 };	
	
    var section = Ti.UI.createListSection({items: data});
    itemsLV.sections = [section];
    itemsLV.visible = true;
    loadingAI.hide();	
};
reload();

//--> ADD TO WIN
win.add(reloadBtn);
win.add(itemsLV);
win.add(loadingAI);

win.open();

Comments

Mauro Parra-Miranda 2013-09-09

Hello, in general we don't recommend scrollable items on top of other scrollable items. Does this happen in simulator or device? Which iOS version? Best, Mauro
Vittorio Sorbera 2013-09-10

Hello, I first tried using the TableView instead of the ListView. In that case there was no problem, but the scroll was too slow. So I chose to use the ListView, which has greatly improved the performance. The only problem is what I described in the issue. The problem appears both in the simulator (6.1) and in the device (iPhone 4s 6.1.3). Regards, Vittorio

Vishal Duggal 2013-12-08

The list view is a data based API. When the scrollable views property changes in response to user action, it is the developers responsibility to change the associated data. Try adding a scrollend event handler to the template as shown below and things should work as expected.

   function scrollHandler(e)
   {
       Ti.API.info(e.sectionIndex+' '+e.itemIndex+' '+e.bindId+' '+e.currentPage);
       if (e.bindId == 'imagesSV') {
           var section = itemsLV.sections[e.sectionIndex];
           var data = section.getItemAt(e.itemIndex);
           Ti.API.info('OLD CURRENT PAGE '+data.imagesSV.currentPage);
           data.imagesSV.currentPage = e.currentPage;
           Ti.API.info('NEW CURRENT PAGE '+data.imagesSV.currentPage);
           section.updateItemAt(e.itemIndex,data,{animated:false});
       }
   
   }
   
   var itemTemplate = {
       childTemplates: [
           {
               type: 'Ti.UI.View',  
               bindId: 'bgView',  
               properties: { 
                   width : "100%",
                   height : "100%",
                   backgroundColor : "#aabbcc",
                   zIndex : 1    
               }           
           },
           {
               type: 'Ti.UI.ScrollableView',  
               bindId: 'imagesSV',  
               properties: {
                   width : "100%",
                   height : "210dp",
                   showPagingControl : true,
                   currentPage : 0,
                   zIndex : 2
               }
           }
       ],
       events:{scrollend:scrollHandler}
   };

Eric Merriman 2017-03-28

Closing

JSON Source