function randomColor() {
return '#'+Math.floor(Math.random()*10777215).toString(16);
}
//FirstView Component Constructor
function FirstView() {
//create object instance, a parasitic subclass of Observable
var self = Ti.UI.createView();
var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel magna dolor. In id laoreet diam. Aliquam elementum tincidunt fringilla. Fusce est felis, tempor et orci nec, rhoncus aliquet diam. In commodo, sem id ultrices commodo, diam risus ultrices nibh, ac pellentesque leo magna in massa. Proin posuere dignissim molestie. Nullam eleifend orci id nulla vestibulum, eu tristique justo cursus. In elementum vehicula venenatis. Proin rhoncus ligula vitae dolor mattis tempus. Maecenas viverra ligula eu est tempor semper. Sed ullamcorper sagittis risus at volutpat. Fusce dapibus libero et dignissim rutrum.";
var views = [];
for (var i = 0; i < 4; i++) {
var view = Ti.UI.createView({
backgroundColor: randomColor(),
layout: 'vertical'
});
view.add(Ti.UI.createLabel({
text: lorem,
color:'#fff',
width:'auto',
height:'auto',
top: '10dp'
}));
for (var j = 1; j <= 6; j++) {
view.add(Ti.UI.createImageView({
image: '/' + j + '.jpg',
width: '95%',
top: '10dp'
}));
}
views.push(view);
}
var scrollView = Titanium.UI.createScrollableView({
views:views,
showPagingControl:false,
pagingControlHeight:30,
maxZoomScale:2.0,
currentPage:1
});
self.add(scrollView);
return self;
}
module.exports = FirstView;
<Alloy>
<Window>
<ScrollableView id="scroller">
<View backgroundColor="red" layout="vertical">
<Label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique ut lorem ut commodo. Nam et dolor commodo, posuere nunc eget, tempor lorem. Nam porta nisi risus, ac iaculis odio lacinia in. Maecenas varius vel purus id rutrum. Fusce vehicula porttitor tortor sed vehicula. Cras mi urna, pretium id enim sed, pulvinar ultrices urna. Nullam sapien dolor, vestibulum at mauris vel, tempor consequat dolor. Nam cursus tempus cursus. Mauris hendrerit, libero at pharetra faucibus, justo turpis rhoncus justo, et placerat ipsum sem elementum erat.</Label>
<ImageView image="/1.jpg"/>
<ImageView image="/2.jpg"/>
<ImageView image="/3.jpg"/>
<ImageView image="/4.jpg"/>
<ImageView image="/5.jpg"/>
<ImageView image="/6.jpg"/>
</View>
<View backgroundColor="blue" layout="vertical">
<Label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique ut lorem ut commodo. Nam et dolor commodo, posuere nunc eget, tempor lorem. Nam porta nisi risus, ac iaculis odio lacinia in. Maecenas varius vel purus id rutrum. Fusce vehicula porttitor tortor sed vehicula. Cras mi urna, pretium id enim sed, pulvinar ultrices urna. Nullam sapien dolor, vestibulum at mauris vel, tempor consequat dolor. Nam cursus tempus cursus. Mauris hendrerit, libero at pharetra faucibus, justo turpis rhoncus justo, et placerat ipsum sem elementum erat.</Label>
<ImageView image="/1.jpg"/>
<ImageView image="/2.jpg"/>
<ImageView image="/3.jpg"/>
<ImageView image="/4.jpg"/>
<ImageView image="/5.jpg"/>
<ImageView image="/6.jpg"/>
</View>
<View backgroundColor="green" layout="vertical">
<Label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique ut lorem ut commodo. Nam et dolor commodo, posuere nunc eget, tempor lorem. Nam porta nisi risus, ac iaculis odio lacinia in. Maecenas varius vel purus id rutrum. Fusce vehicula porttitor tortor sed vehicula. Cras mi urna, pretium id enim sed, pulvinar ultrices urna. Nullam sapien dolor, vestibulum at mauris vel, tempor consequat dolor. Nam cursus tempus cursus. Mauris hendrerit, libero at pharetra faucibus, justo turpis rhoncus justo, et placerat ipsum sem elementum erat.</Label>
<ImageView image="/1.jpg"/>
<ImageView image="/2.jpg"/>
<ImageView image="/3.jpg"/>
<ImageView image="/4.jpg"/>
<ImageView image="/5.jpg"/>
<ImageView image="/6.jpg"/>
</View>
<View backgroundColor="black" layout="vertical">
<Label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique ut lorem ut commodo. Nam et dolor commodo, posuere nunc eget, tempor lorem. Nam porta nisi risus, ac iaculis odio lacinia in. Maecenas varius vel purus id rutrum. Fusce vehicula porttitor tortor sed vehicula. Cras mi urna, pretium id enim sed, pulvinar ultrices urna. Nullam sapien dolor, vestibulum at mauris vel, tempor consequat dolor. Nam cursus tempus cursus. Mauris hendrerit, libero at pharetra faucibus, justo turpis rhoncus justo, et placerat ipsum sem elementum erat.</Label>
<ImageView image="/1.jpg"/>
<ImageView image="/2.jpg"/>
<ImageView image="/3.jpg"/>
<ImageView image="/4.jpg"/>
<ImageView image="/5.jpg"/>
<ImageView image="/6.jpg"/>
</View>
</ScrollableView>
</Window>
</Alloy>
'Label': {
color: "white",
top: "10dp",
height: "auto",
width: "auto"
}
'ImageView': {
width: "95%",
top: "10dp"
}
'#scroller': {
showPagingControl:false,
pagingControlHeight:30,
maxZoomScale:2.0,
currentPage:1
}