Skip to content

Instantly share code, notes, and snippets.

@asiby
Forked from dawsontoth/InfiniteScrollableView.js
Created March 9, 2016 03:01
Show Gist options
  • Save asiby/e7e5bb750afecfcdf605 to your computer and use it in GitHub Desktop.
Save asiby/e7e5bb750afecfcdf605 to your computer and use it in GitHub Desktop.
Infinite scrollable list.
/**
* 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