Titanium ScrollView 无法正确显示 UI答案

【问题标题】：Titanium ScrollView Not Displaying UI ProperlyTitanium ScrollView 无法正确显示 UI
【发布时间】：2014-11-10 00:41:58
【问题描述】：

这是我的代码：

var startWeekWin = Ti.UI.createWindow({
title:'Startup Weekend',
layout: 'vertical',
backgroundColor:'#b6e2e2'
});

// create scroll view here
var sv = Ti.UI.createScrollView({
contentWidth:'auto',
contentHeight: 'auto',
top: 0,
showVerticalScrollIndicator: true
}); 

startWeekWin.add(sv);

var lblPicture = Ti.UI.createLabel({
top: 0,
width: 'fill',
height: 100,
backgroundImage: 'images/StartUpWeekend.png'
});

var lblTitle = Ti.UI.createLabel({
top: 15,
left: 15,
right: 15,
height: '15%',
font: {
    fontSize: 24,
    fontWeight: "bold",
    fontFamily: "Helvetica"
},
text: "What is it?",
color: '#0a3f56',
backgroundColor: '#b6e2e2'
});

var lblText = Ti.UI.createLabel({
top: 30,
left: 15,
right: 15,
height: 70,
font: {
    fontSize: 16,
    fontFamily: "Helvetica",
},
text: "Etsy doostang zoodles disqus groupon " +
         "greplin oooj voxy " +
         "zoodles, weebly ning heekya " +
         "handango imeem plugg",
color: '#1d1d1d',
backgroundColor: '#b6e2e2'
});

var lblDate = Ti.UI.createLabel({
top: 30,
width: 'fill',
height: 50,
font: {
    fontSize: 24,
    fontWeight: "normal",
    fontFamily: "Helvetica",
    fontStyle: "italic"
},
text: "     January 23-25, 2015",
color: '#0a3f56',
backgroundColor: '#b6e2e2'
});

// video trailer goes here
var trailer = Ti.UI.createLabel({
top: 35,
width: 'fill',
height: 50,
text: 'Trailer Goes Here',
color: '#1d1d1d',
backgroundColor: '#b6e2e2'
});

// learn more button
var learnMoreButton = Ti.UI.createButton({
top: 40,
left: 40,
right: 40,
width: 180,
height: 50,
title: 'Learn More',
font: {
    fontSize: 18,
    fontFamily: "Helvetica",
    fontWeight: "normal"
},
color: '#0a3f56',
backgroundColor: 'white'
});

sv.add(lblPicture);
sv.add(lblTitle);
sv.add(lblText); 
sv.add(lblDate);
sv.add(trailer);

sv.add(learnMoreButton);

这就是它显示的内容：http://imgur.com/t4AQTMJ

我不明白为什么所有东西都堆叠在一起。

有人能指出我缺少什么吗？

谢谢。

【问题讨论】：

标签： javascript scrollview titanium-mobile

【解决方案1】：

有很多方法可以构建您想要的 UI。首先，您将 sv(scroll view) 的所有子元素置于顶部。每个子元素都从 SV 开始位置开始。如果你想给 sv 的每个子元素设置顶部，那么将布局垂直属性应用于滚动视图。

第二种方法是在第一个元素结束后给出顶部。

每个人都从滚动视图中占据顶部，所以他们都骑在每个人身上，首先申请第一种方式，如果遇到任何困难，请告诉我。

不使用布局样式会给它一个类似 position:absolute of HTML 的属性。不使用布局有时很好，因为它有助于使视图居中。

【讨论】：

非常感谢！！ “布局：'垂直'”属性是滚动视图窗口中缺少的。它现在完美运行:))

【解决方案2】：

问题在于您赋予每个元素的顶部。由于所有元素都有顶部，因此将超过其他元素。如果您要更新顶部，您的布局将得到修复。

【讨论】：