Skip to content

Instantly share code, notes, and snippets.

@nazrdogan
Created April 12, 2014 16:43
Show Gist options
  • Save nazrdogan/10545120 to your computer and use it in GitHub Desktop.
Save nazrdogan/10545120 to your computer and use it in GitHub Desktop.
Titanium Infinite scrollview
// ScrollView.js
function ScrollView(args){
var args = args || {};
var nearBottom = false;
var loadingView = Ti.UI.createView({
height:60,
width: Ti.UI.SIZE,
backgroundColor:"transparent",
visible:false
});
var activityIndicator = Ti.UI.createActivityIndicator({
color: '#000',
font: {fontFamily:'Helvetica Neue', fontSize:16, fontWeight:'bold'},
message: ' Loading...',
style:Ti.UI.iPhone.ActivityIndicatorStyle.DARK,
height:Ti.UI.SIZE,
width:Ti.UI.SIZE
});
activityIndicator.show();
loadingView.add(activityIndicator);
var ScrollView = Ti.UI.createScrollView({
width: Ti.UI.SIZE,
height: Ti.UI.FILL,
contentWidth: Ti.UI.SIZE,
contentHeight: Ti.UI.SIZE,
showVerticalScrollIndicator: true,
showHorizontalScrollIndicator: false,
backgroundColor:"transparent",
layout:"vertical"
});
var contentView = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
layout: 'vertical',
top:0,
left:0,
backgroundColor:'transparent'
});
ScrollView.add(contentView);
ScrollView.add(loadingView);
ScrollView.addEventListener('scroll',function(e){
var tolerance = 60;
nearBottom = (contentView.getRect().height - e.y) <= (ScrollView.getRect().height + tolerance);
});
ScrollView.addEventListener('scrollend',function(e){
if(nearBottom){
//this.scrollTo(0,bottomLine);
loadingView.setVisible(true);
nearBottom = false;
ScrollView.fireEvent('InfiniteScrolling');
}
});
ScrollView.infiniteScrollingCompleted = function(e){
loadingView.setVisible(false);
};
ScrollView.addView = function(view){
contentView.add(view);
}
return ScrollView;
}
module.exports = ScrollView;
/* SAMPLE USAGE */
var win = Ti.UI.createWindow({});
var ScrollView = require('ScrollView'); //point to ScrollView.js
scrollView = new ScrollView();
// scrollView must be inside a View Container
var contentView = Ti.UI.createView({
width:'90%',
height: 500,
top:200
});
contentView.add(scrollView);
win.add(contentView);
//Demo infinite load
scrollView.addEventListener("InfiniteScrolling", function(e){
Ti.API.info("InfiniteScrolling event -> start loading data");
//simulate download of remote data
setTimeout(function(){
//call infiniteScrollingCompleted when your update is done
scrollView.infiniteScrollingCompleted();
//update the scrollView
for(var i=0; i < 3; i++){
var view = Ti.UI.createView({
height:100,
top:10,
backgroundColor:"blue"
});
//i need use addView to add to the subview not add
scrollView.addView(view);
}
},1500);
});
//demo data
for(var i=0; i < 10; i++){
var view = Ti.UI.createView({
height:100,
top:10,
backgroundColor:"#ccc"
});
//i need use addView to add to the subview not add
scrollView.addView(view);
}
win.open();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment