Question

我在index.xml文件中有这个，其中窗口有3个视图，第二个视图是带有2个文本框的表单视图。在点击文本框时，它隐藏在虚拟键盘后面。我想在进入文本框时获得可滚动视图。

在index.js中的

我打开windows为$ .win.open（）和$ .win1.open（）。

<Alloy>
<View id="network" class="network" width= Titanium.UI.FILL visible="false" top="30">
    <Label class="networkLabel">Oops! No Internet Connection. Please retry again later</Label>
</View>
<NavigationWindow id="win1" platform="ios" zIndex= 1 >
<Window id="win" class="container"  title="Login">
        <View id="specificError" class="network" width= Titanium.UI.FILL visible="false" top="50">
        <Label class="networkLabel">Oops! Something went wrong. We're on it.</Label>
    </View>
    <View class="headingView">
         <ImageView id="iconImage" image="images/xx.png" opacity="0.8"  />
        <Label id="headingLabel">xxx</Label>
        <Label class="subheadLabel">xxxxxxx</Label>
    </View>

    <View class="formView">
        <TextField id="xx"  height="50" value="xx">
             <ImageView id="iconEmailImage" image="images/iOS_Login_Email_Icon.png" />
        </TextField>
        <View id="borderBottom"></View>

        <TextField passwordMask="true" id="password"  height="50" value="xxx">
            <ImageView id="iconPwdImage" image="images/iOS_Login_Pwd_Icon.png" />
        </TextField>
        <View id="borderBottom"></View>

        <Button id="btnLogin" title="LOGIN" height="50" color="#ffffff" backgroundColor="#8EBECC" textAlign="Titanium.UI.TEXT_ALIGNMENT_CENTER" onClick="doLogin"></Button>

    </View>

    <View class="footerView">
        <ImageView id="XX" image="images/XX.png"></ImageView>
        <Label class="copyrightLabel">copyright(c) 2015 xxx Co.All rights reserved. </Label>
    </View>
</Window>

</NavigationWindow>

Answer 1

实现此目的的最简单方法是在Window中添加ScrollView。添加top，bottom和contentHeight属性，如下例所示。通常我通过TSS或通过ScrollView上的类属性来执行此操作，该属性也在tss文件中声明。

<Alloy>
    <NavigationWindow id="win1" platform="ios" zIndex="1">
        <Window id="win" class="container" title="Login">
            <ScrollView top="0" bottom="0" contentHeight="Ti.UI.SIZE">
                <!-- Your window child view elements -->
            </ScrollView>
        </Window>
    </NavigationWindow>
</Alloy>

Answer 2

你可以通过以下技巧来实现这一点，这就是我解决这个问题的方法。

textName.addEventListener("focus", function()
   window.animate({bottom: "30%", duration:500}); 
});

textName.addEventListener("blur", function() {
   window.animate({bottom: 0, duration:500}); 
});

单击文本框appcelerator

2 个答案: