Created
February 3, 2011 20:54
-
-
Save dawsontoth/810171 to your computer and use it in GitHub Desktop.
Infinite scrollable list.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* We're going to create an infinite scrollable list. In this case, we're going to show a date. When you swipe left, | |
* you'll see yesterday. Then the day before yesterday, and so on. Swiping right shows you tomorrow, and so on. | |
*/ | |
var win = Ti.UI.createWindow({ backgroundColor: '#fff' }); | |
var isAndroid = Ti.Platform.osname === 'android'; | |
/** | |
* Track where we are in the infinite scrollable views, and define how large of a step goes between each view. | |
*/ | |
var currentDate = new Date(), msIntervalBetweenViews = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/; | |
/** | |
* Create our UI elements. | |
*/ | |
var scrollable = Ti.UI.createScrollableView({ currentPage: 1, showPagingControls: true, pagingControlHeight: 30 }), | |
containers = [ | |
Ti.UI.createView({ backgroundColor:'#fdd', top: 0, right: 0, bottom: 0, left: 0 }), | |
Ti.UI.createView({ backgroundColor:'#dfd', top: 0, right: 0, bottom: 0, left: 0 }), | |
Ti.UI.createView({ backgroundColor:'#ddf', top: 0, right: 0, bottom: 0, left: 0 }) | |
]; | |
win.add(scrollable); | |
scrollable.views = containers; | |
/** | |
* Loads data into the specified view based on the specified date. | |
* @param view | |
* @param date | |
*/ | |
function loadView(view, date) { | |
// empty out any children | |
if (view.children) { | |
for (var c = view.children.length - 1; c >= 0; c--) { | |
view.remove(view.children[c]); | |
} | |
} | |
// add new children | |
var label = Ti.UI.createLabel({ | |
text: date.toLocaleDateString(), | |
color: '#000', | |
width:'auto', | |
height:'auto' | |
}); | |
view.add(label); | |
} | |
/** | |
* Whenever we scroll, manipulate our views so that the user is back to viewing the "middle" view with a buffer view on | |
* either side, then make sure the buffer views are actually loaded and ready to go. | |
*/ | |
function scrollListener(evt) { | |
// what is our current page? | |
switch (evt.currentPage) { | |
case 0: // scrolled to the left | |
// so pop a view off the end, and put it at the start | |
containers.unshift(containers.pop()); | |
if (isAndroid) { | |
// temporarily remove our event listener (for Android's sake...) | |
scrollable.removeEventListener('scroll', scrollListener); | |
} | |
// reset the counter so we are back in the middle | |
scrollable.currentPage = 1; | |
// reset our views array | |
scrollable.views = containers; | |
if (isAndroid) { | |
// now we can add the event listener again | |
scrollable.addEventListener('scroll', scrollListener); | |
} | |
// take a day from our currentDate | |
currentDate.setDate(currentDate.getDate() - 1); | |
// and now buffer load the view we reset | |
loadView(containers[0], new Date(currentDate.getTime() - msIntervalBetweenViews)); | |
break; | |
case 1: | |
// they didn't go anywhere; should only happen the first time around | |
break; | |
case 2: // scrolled to the right | |
// so shift a view off the start, and put it at the end | |
containers.push(containers.shift()); | |
if (isAndroid) { | |
// temporarily remove our event listener (for Android's sake...) | |
scrollable.removeEventListener('scroll', scrollListener); | |
} | |
// reset the counter so we are back in the middle | |
scrollable.currentPage = 1; | |
// reset our views array | |
scrollable.views = containers; | |
if (isAndroid) { | |
// now we can add the event listener again | |
scrollable.addEventListener('scroll', scrollListener); | |
} | |
// add a day to our currentDate | |
currentDate.setDate(currentDate.getDate() + 1); | |
// and now buffer load the view we reset | |
loadView(containers[2], new Date(currentDate.getTime() + msIntervalBetweenViews)); | |
break; | |
} | |
} | |
scrollable.addEventListener('scroll', scrollListener); | |
/** | |
* Set up our initial views. | |
*/ | |
loadView(containers[0], new Date(currentDate.getTime() - msIntervalBetweenViews)); | |
loadView(containers[1], currentDate); | |
loadView(containers[2], new Date(currentDate.getTime() + msIntervalBetweenViews)); | |
/** | |
* That's it, we just need to open the window! Hope you enjoyed this. | |
*/ | |
win.open(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hell yeah, looks like general problem with scrollable view on droid, flickers after adding views, seems to be ok on ios