UI Components
ScrollView
UI component for rendering scrollable content (horizontal or vertical).
<ScrollView> is a UI component for rendering scrollable content. Content can be scrolled vertically (default) or horizontally.
Note
A ScrollView can only have a single child element.
<ScrollView>
<StackLayoutpadding="12">
<Labeltext="v1"height="50" />
<Labeltext="v2"height="50" />
<Labeltext="v3"height="50" />
<Labeltext="v4"height="50" />
<Labeltext="v5"height="50" />
<Labeltext="v6"height="50" />
<Labeltext="v7"height="50" />
<Labeltext="v8"height="50" />
<Labeltext="v9"height="50" />
</StackLayout>
</ScrollView><ScrollView>
<StackLayoutpadding="12">
<Labeltext="v1"height="50"></Label>
<Labeltext="v2"height="50"></Label>
<Labeltext="v3"height="50"></Label>
<Labeltext="v4"height="50"></Label>
<Labeltext="v5"height="50"></Label>
<Labeltext="v6"height="50"></Label>
<Labeltext="v7"height="50"></Label>
<Labeltext="v8"height="50"></Label>
<Labeltext="v9"height="50"></Label>
</StackLayout>
</ScrollView><gridLayoutrows="*, 50, 300, *">
<scrollVieworientation="horizontal"row="1">
<stackLayoutorientation="horizontal"padding="12">
<labeltext="h1"width="50"></label>
<labeltext="h2"width="50"></label>
<labeltext="h3"width="50"></label>
<labeltext="h4"width="50"></label>
<labeltext="h5"width="50"></label>
<labeltext="h6"width="50"></label>
<labeltext="h7"width="50"></label>
<labeltext="h8"width="50"></label>
<labeltext="h9"width="50"></label>
</stackLayout>
</scrollView>
<contentViewrow="2">
<scrollView>
<stackLayoutpadding="12">
<labeltext="v1"height="50"></label>
<labeltext="v2"height="50"></label>
<labeltext="v3"height="50"></label>
<labeltext="v4"height="50"></label>
<labeltext="v5"height="50"></label>
<labeltext="v6"height="50"></label>
<labeltext="v7"height="50"></label>
<labeltext="v8"height="50"></label>
<labeltext="v9"height="50"></label>
</stackLayout>
</scrollView><scrollview>
<stacklayoutpadding="12">
<labeltext="v1"height="50"></label>
<labeltext="v2"height="50"></label>
<labeltext="v3"height="50"></label>
<labeltext="v4"height="50"></label>
<labeltext="v5"height="50"></label>
<labeltext="v6"height="50"></label>
<labeltext="v7"height="50"></label>
<labeltext="v8"height="50"></label>
<labeltext="v9"height="50"></label>
</stacklayout>
</scrollview><scrollView>
<stackLayoutpadding="12">
<labeltext="v1"height="50"></label>
<labeltext="v2"height="50"></label>
<labeltext="v3"height="50"></label>
<labeltext="v4"height="50"></label>
<labeltext="v5"height="50"></label>
<labeltext="v6"height="50"></label>
<labeltext="v7"height="50"></label>
<labeltext="v8"height="50"></label>
<labeltext="v9"height="50"></label>
</stackLayout>
</scrollView><ScrollView>
<StackLayout padding="12">
<Label text="v1" height="50"></Label>
<Label text="v2" height="50"></Label>
<Label text="v3" height="50"></Label>
<Label text="v4" height="50"></Label>
<Label text="v5" height="50"></Label>
<Label text="v6" height="50"></Label>
<Label text="v7" height="50"></Label>
<Label text="v8" height="50"></Label>
<Label text="v9" height="50"></Label>
</StackLayout>
</ScrollView>Props β
orientation β
orientation: 'horizontal'|'vertical'Gets or sets the direction in which the content can be scrolled.
Defaults to vertical.
scrollBarIndicatorVisible β
scrollBarIndicatorVisible: booleanSpecifies if the scrollbar is visible.
Defaults to true.
isScrollEnabled β
isScrollEnabled: booleanEnables or disables scrolling of the ScrollView.
verticalOffset β
verticalOffset: numberGets the vertical offset of the scrolled content.
horizontalOffset β
horizontalOffset: numberGets the horizontal offset of the scrolled content.
scrollableHeight β
scrollableHeight: numberGets the maximum scrollable height, this is also the maximum value for the verticalOffset.
scrollableWidth β
scrollableWidth: number = scrollView.scrollableWidthGets the maximum scrollable width, this is also the maximum value for the horizontalOffset.
Methods β
scrollToVerticalOffset() β
scrollToVerticalOffset(value: number, animated: boolean)Scrolls the content to the specified vertical offset.
Set animated to true for animated scroll, false for immediate scroll.
scrollToHorizontalOffset() β
scrollToHorizontalOffset(value: number, animated: boolean)Scrolls the content to the specified horizontal offset position.
Set animated to true for animated scroll, false for immediate scroll.
Events β
scroll β
on('scroll', (args:ScrollEventData) => {
constscrollView= args.object asScrollView
console.log('Scrolled', {
scrollX: args.scrollX,
scrollY: args.scrollY,
})
})Emitted when the ScrollView is scrolled.
See ScrollEventData.
Native component β
- Android:
android.view - iOS:
UIScrollView