スクロールビュー

ScrollableViewコンポーネントを使用すると、アプリケーションのスクロール可能な領域を表示できます。 この領域には、表示エリアよりも大きなコンテンツがあります。 ScrollViewにはorientationプロパティがあり、ビューに異なる方向を設定できます。

使用法

<!--
    The default value of the orientation property is 'vertical'.
    The ScrollView also supports 'horizontal' as orientation value
-->
<ScrollView orientation="vertical">
    <GridLayout rows="200 200 200 200 200 200 200 200 200 200">
        <Label class="m-10" row="0" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="1" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="2" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="3" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="4" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="5" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="6" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="7" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="8" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="9" text="Some text content follows here..." textWrap="true"/>
    </GridLayout>
</ScrollView>

デモソース

ヒントと手法

スクロールイベント

scrollイベントを使用すると、 ScrollEventDataからscrollXとscrollYを介して、 スクロール位置を追跡できます。

<ScrollView scroll="onScroll">
    <GridLayout rows="200 200 200 200 200 200 200 200 200 200">
        <Label row="0" text="Some row content goes here..."/>
        <Label row="1" text="Some row content goes here..."/>
        <Label row="2" text="Some row content goes here..."/>
        <Label row="3" text="Some row content goes here..."/>
        <Label row="4" text="Some row content goes here..."/>
        <Label row="5" text="Some row content goes here..."/>
        <Label row="6" text="Some row content goes here..."/>
        <Label row="7" text="Some row content goes here..."/>
        <Label row="8" text="Some row content goes here..."/>
        <Label row="9" text="Some row content goes here..."/>
    </GridLayout>
</ScrollView>

function onScroll(args) {
    const scrollView = args.object;

    console.log(`scrollX: ${args.scrollX}`);
    console.log(`scrollY: ${args.scrollY}`);
}

exports.onScroll = onScroll;

import { Page } from "tns-core-modules/ui/page";
import { ScrollEventData, ScrollView } from "tns-core-modules/ui/scroll-view";

export function onScroll(args: ScrollEventData) {
    const scrollView = args.object as ScrollView;

    console.log("scrollX: " + args.scrollX);
    console.log("scrollY: " + args.scrollY);
}

パフォーマンスのヒント

ScrollView内のScrollView、 ScrollView内のListView、 またはListViewの項目内のScrollViewを使用すると、 ユーザーインターフェイスのパフォーマンスが悪くなり、ユーザーエクスペリエンスに影響する可能性があります。 これらの問題を回避するために、ListViewがScrollViewに入れ子になっている場合のシナリオでは ListViewの高さを明示的に指定し、 ScrollViewの高さ（ コンポーネントがListViewの中で使用されている場合や、ScrollViewのシナリオでのScrollViewの中の子ScrollViewの高さ）を指定する必要があります。

例1（ScrollView内のListView）

<ScrollView>
    <StackLayout>
        <ListView height="150" items="">
                <ListView.itemTemplate>
                    <!-- ....... -->
                </ListView.itemTemplate>
        </ListView>
    </StackLayout>
</ScrollView>

例2（ListView内のScrollView ）

<ListView items="">
    <ListView.itemTemplate>
        <StackLayout class="list-group-item">
            <ScrollView height="150" >
                <!-- ....... -->
            </ScrollView>
        </StackLayout>
    </ListView.itemTemplate>
</ListView>

例3（ ScrollView内のScrollView ）：

<ScrollView>
    <StackLayout>
        <ScrollView height="150" >
            <!-- ....... -->
        </ScrollView>
    </StackLayout>
</ScrollView>

デモソース

プロパティ

イベント

APIリファレンス

Native Component