Skip to content

Instantly share code, notes, and snippets.

@jabubuck
Last active December 15, 2015 20:49
Show Gist options
  • Save jabubuck/5321252 to your computer and use it in GitHub Desktop.
Save jabubuck/5321252 to your computer and use it in GitHub Desktop.
Small sample that demonstrates page scrolling controlled by a slider that snaps to values along the length. For Titanium works on Android and iOS. You can do whatever you want with this code.
var win = Ti.UI.createWindow({
fullscreen: true,
backgroundColor: 'gray',
layout: 'vertical'
});
//This function is used to create our pages
function newPage(pageColor, leftPos){
v = Ti.UI.createView({backgroundColor: pageColor, left: leftPos, height: Ti.Platform.displayCaps.platformHeight * 0.9, width: Ti.Platform.displayCaps.platformWidth});
return v;
};
//create the pages
var page1; var page2; var page3; var page4; var page5; var page6; var page7; var page8;
//Add pages to an array so they can be added
var pageArr = [page1, page2, page3, page4, page5, page6, page7, page8];
//Add the page colors to the array
var styleArr = ['red', 'blue', 'white', 'green', 'purple', 'yellow', 'blue', 'red'];
//Set the number of pages you wish to use
var numberOfPages = pageArr.length;
//Create a container view that can hold all of our pages
var view = Ti.UI.createView({
backgroundColor: 'black',
left: 0,
height: Ti.Platform.displayCaps.platformHeight * 0.9,
width: Ti.Platform.displayCaps.platformWidth * numberOfPages
});
win.add(view);
//Create pages and add them to the main view
for(var i = 0; i < pageArr.length; i++){
var leftPos = Ti.Platform.displayCaps.platformWidth * i;
pageArr[i] = newPage(styleArr[i], leftPos);
view.add(pageArr[i]);
};
//Create the slider and set the width
var snapSlider = Ti.UI.createSlider({
min: 0,
max: numberOfPages - 1,
width: '80%',
center: 0,
value: 0,
bottom: Ti.Platform.displayCaps.platformHeight / 10
});
win.add(snapSlider);
snapSlider.addEventListener('touchend', function(e){
this.value = Math.round(e.source.value);//This allows the slider to snap to set points
//We then animate the view to display the correct page
view.animate({left: -Ti.Platform.displayCaps.platformWidth * this.value, duration: 1000});
});
win.open();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment