如何在Titanium中插入垂直滚动条

Question

I'm building an application with Titanium

Now I want to set a scrollview in one Window because the content of this windows is to big of the device. So I want insert a ScrollView and show the vertical scrollbar.

So I'm building this code:

<Alloy>
    <Window id="indexWindow" orientation="Titanium.UI.UPSIDE_PORTRAIT"  fullscreen="false">
         <ScrollView id="scrollView" showVerticalScrollIndicator="true"
            showPagingControl= "true" showHorizontalScrollIndicator="true" height="80%" width="80%">

        <View class="container" layout="vertical">
            <!-- title -->
            <Label id="titleDatiAnagrafici" class="labelTitle" ></Label>

            <!-- personal data -->
            <TableView id="form_table" height="Titanium.UI.SIZE">

                <TableViewRow id="name_row" class="row_item" layout="horizontal">
                    <Label id="name_label" class="label" />
                    <Label text="Mario" class="labelData"/>

                    <Label id="surname_label" class="label" left="20px"/>
                    <Label text="Rossi" class="labelData"/>
                </TableViewRow>

                <TableViewRow id="name_row" class="row_item" layout="horizontal">
                    <Label id="address_label" class="label" />
                    <Label text="via Cereate 8, Milano" class="labelData"/>

                </TableViewRow>

                <TableViewRow id="name_row" class="row_item" layout="horizontal">
                    <Label id="phone_label" class="label"/>
                    <Label text="333111222" class="labelData"/>
                </TableViewRow>

            </TableView>



        </View>
        </ScrollView>
    </Window>
</Alloy>

But I can't see the vertical scrollbar.

Answer 1

You must use the height property of the View.

 <Window id="indexWindow" orientation="Titanium.UI.UPSIDE_PORTRAIT"  fullscreen="false">
     <ScrollView id="scrollView" showVerticalScrollIndicator="true"
        showPagingControl= "true" showHorizontalScrollIndicator="true" height="80%" width="80%">

    <View class="container" layout="vertical" height="2000">
        <!-- title -->
        <Label id="titleDatiAnagrafici" class="labelTitle" ></Label>

        <!-- personal data -->
        <TableView id="form_table" height="Titanium.UI.SIZE">

            <TableViewRow id="name_row" class="row_item" layout="horizontal">
                <Label id="name_label" class="label" />
                <Label text="Mario" class="labelData"/>

                <Label id="surname_label" class="label" left="20px"/>
                <Label text="Rossi" class="labelData"/>
            </TableViewRow>

            <TableViewRow id="name_row" class="row_item" layout="horizontal">
                <Label id="address_label" class="label" />
                <Label text="via Cereate 8, Milano" class="labelData"/>

            </TableViewRow>

            <TableViewRow id="name_row" class="row_item" layout="horizontal">
                <Label id="phone_label" class="label"/>
                <Label text="333111222" class="labelData"/>
            </TableViewRow>

        </TableView>



    </View>
    </ScrollView>
</Window>

By default the view takes the size of its parent so the scrollview will never appear.

Answer 2

In according with documentation, you can add the following attribute in your ScrollView tag:

showVerticalScrollIndicator="true"

You can add in the same way also an horizontal bar if you want:

showHorizontalScrollIndicator: true

Look at documentation here

Regards