【问题标题】:Appcelerator change Content height on a ScrollViewAppcelerator 更改 ScrollView 上的内容高度
【发布时间】:2016-01-14 16:02:54
【问题描述】:

我的合金项目中有一个滚动视图,当按下按钮时我需要添加一些视图,但内容高度、可滚动区域并没有改变,底部内容远离视图。 这是我的合金视图 (.xml) 文件

<Alloy>
  <Window class="container">
    <ScrollView id="MainView" >
      <View id="innerContent" class="rowLayout">
        <Label>Address 1</Label>
        <TextField id="Address1" class="textArea"></TextField> 
      </View>
    </ScrollView>
    <View id="buttonView">
      <Button id="button" onClick="doClick" title="Add New Address Input" top="10" width="100" height="50" />
    </View>
  </Window>
</Alloy>

我的样式文件 (.tss),包含所有样式:

    ".container": {
        backgroundColor:"white",
        height: Titanium.UI.FILL
    }
    "#MainView": { 
        width: Titanium.UI.FILL,
        height: Titanium.UI.FILL,
        scrollType: "vertical",
        layout: "vertical",
        bottom: "100dp",
        top: "20dp",
        borderColor: "#008000",
        borderWidth: "1px",
        left:"2dp",
        right: "2dp"

    }

    "#buttonView" : {
        height: "50dp",
        width: Titanium.UI.FILL,
        right: "10dp",
        left: "10dp",
        bottom: '8dp',
        borderColor: "#000000",
        borderWidth: "1px"
    }
    ".rowLayout": {
        layout: "vertical"
    }
    ".textArea" : {
        height: "70dp",
        width: Titanium.UI.FILL,
        borderColor: "#000000",
        borderWidth: "1dp",
        left: "8dp",
        right: "8dp"
    }

还有我的控制器 (.js)

var counter=0;
function doClick() { 
  counter++;

  var label = Ti.UI.createLabel({
    text: "Address " + counter + " :"
  });
  var textField = Ti.UI.createTextField({
    height: "70dp",
    width: Titanium.UI.FILL,
    borderColor: "#000000",
    borderWidth: "1dp",
    top: "5dp",
    right: "8dp",
    left: "8dp"
  });

  $.innerContent.add(label);
  $.innerContent.add(textField);
}

$.index.open();

The scroll views does not scroll, or if I already set 3 or four inputs it scroll only to the point where the fourth input was

【问题讨论】:

    标签: titanium appcelerator appcelerator-titanium appcelerator-alloy


    【解决方案1】:

    首先要做的是将您的样式从 .xml 移动到 .tss 以增加概览

    尝试将您的ScrollView 高度设置为Ti.UI.SIZE,然后将layout 设置为vertical,然后在您的click 函数上添加新视图top: '5%', bottom: '5%'

    但请记住...您的ScrollView 外有一个按钮,当您的ScrollView 增加高度时它会离开屏幕

    【讨论】:

    • 好吧,我在我的代码中发现了很多错误,我想我需要清理它并进行编辑以获得更好的结果。感谢您的回答,但我不想更改 scrollView 的高度,而是更改该视图内的可滚动区域,因为我将在其中添加更多标签和文本字段
    • 所以您想增加要添加的视图的高度,对吧?我猜同样的事情......让它height: Ti.UI.SIZElayout: 'vertical'
    • 仍然没有成功,不幸的是,我编辑了代码以添加我的 .tss 文件,滚动仍然无法设置 UI 大小和垂直布局。
    • 尝试将rowLayout添加到height: Ti.UI.SIZE, top: '5dp', bottom: '5dp'
    • 现在可以了,设置内部视图Ti.UI.SIZE,解决了问题,非常感谢
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-15
    • 2013-03-06
    • 2016-05-30
    • 2016-06-17
    • 2019-01-05
    • 1970-01-01
    相关资源
    最近更新 更多