Skip to content

Commit 3fa38e4

Browse files
rigor789rigor789
committed
docs: cleanup ScrollView
1 parent a31c6ba commit 3fa38e4

File tree

6 files changed

+95
-165
lines changed

6 files changed

+95
-165
lines changed

‎content/screenshots/android/ScrollView.png

29 KB
Loading

‎content/screenshots/ios/ScrollView.png

71.8 KB
Loading

‎content/ui/scrollview.md

Lines changed: 47 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -1,244 +1,126 @@
11
---
22
title: ScrollView
3+
description: UI component for rendering scrollable content (horizontal or vertical).
34
---
45

5-
`<ScrollView>` is a UI component that shows a scrollable content area. Content can be scrolled vertically or horizontally.
6+
`<ScrollView>` is a UI component for rendering scrollable content. Content can be scrolled `vertically` (default) or `horizontally`.
67

7-
It's important to note that `<ScrollView>` extends [`ContentView`](https://docs.nativescript.org/api-reference/classes/contentview), so it can only have a single child element.
8+
::: warning Note
89

9-
By default, ScrollView scrolls vertically. To scroll horizontally, set the ScrollView's `orientation` property to `horizontal`.
10+
A ScrollView can only have a single child element.
1011

11-
---
12+
:::
1213

1314
<DeviceFrame type="ios">
14-
<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/ScrollView.png"/>
15+
<img src="../screenshots/ios/ScrollView.png"/>
1516
</DeviceFrame>
1617
<DeviceFrame type="android">
17-
<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/ScrollView.png" />
18+
<img src="../screenshots/android/ScrollView.png"/>
1819
</DeviceFrame>
1920

20-
### Creating a Simple ScrollView
21-
22-
<!-- /// flavor plain -->
23-
24-
```xml
25-
26-
<ScrollView scroll="onScroll">
27-
<GridLayout rows="200 200 200 200 200 200 200 200 200 200">
28-
<Label row="0" text="Some row content goes here..." />
29-
<Label row="1" text="Some row content goes here..." />
30-
<Label row="2" text="Some row content goes here..." />
31-
<Label row="3" text="Some row content goes here..." />
32-
<Label row="4" text="Some row content goes here..." />
33-
<Label row="5" text="Some row content goes here..." />
34-
<Label row="6" text="Some row content goes here..." />
35-
<Label row="7" text="Some row content goes here..." />
36-
<Label row="8" text="Some row content goes here..." />
37-
<Label row="9" text="Some row content goes here..." />
38-
</GridLayout>
39-
</ScrollView>
40-
```
41-
42-
```ts
43-
import { Page, ScrollEventData, ScrollView } from '@nativescript/core'
44-
45-
export function onScroll(args: ScrollEventData) {
46-
const scrollView = args.object as ScrollView
47-
48-
console.log('scrollX: ' + args.scrollX)
49-
console.log('scrollY: ' + args.scrollY)
50-
}
51-
```
52-
53-
<!-- ///
54-
55-
/// flavor angular
56-
57-
```xml
58-
<ScrollView (scroll)="onScroll($event)">
59-
<GridLayout rows="200 200 200 200 200 200 200 200 200 200">
60-
<Label row="0" text="Some row content goes here..."></label>
61-
<Label row="1" text="Some row content goes here..."></label>
62-
<Label row="2" text="Some row content goes here..."></label>
63-
<Label row="3" text="Some row content goes here..."></label>
64-
<Label row="4" text="Some row content goes here..."></label>
65-
<Label row="5" text="Some row content goes here..."></label>
66-
<Label row="6" text="Some row content goes here..."></label>
67-
<Label row="7" text="Some row content goes here..."></label>
68-
<Label row="8" text="Some row content goes here..."></label>
69-
<Label row="9" text="Some row content goes here..."></label>
70-
</GridLayout>
71-
</ScrollView>
72-
```
73-
74-
```ts
75-
import { Component } from '@angular/core'
76-
import { ScrollView, ScrollEventData } from '@nativescript/core'
77-
78-
@Component({
79-
moduleId: module.id,
80-
templateUrl: './tips-and-tricks.component.html'
81-
})
82-
export class TipsAndTricksComponent {
83-
onScroll(args: ScrollEventData) {
84-
const scrollView = args.object as ScrollView
85-
86-
console.log('scrollX: ' + args.scrollX)
87-
console.log('scrollY: ' + args.scrollY)
88-
}
89-
}
90-
```
91-
92-
///
93-
94-
/// flavor vue
95-
96-
```xml
97-
<ScrollView orientation="horizontal">
98-
<StackLayout orientation="horizontal">
99-
<Label text="this" />
100-
<Label text="text" />
101-
<Label text="scrolls" />
102-
<Label text="horizontally" />
103-
<Label text="if necessary" />
104-
</StackLayout>
105-
</ScrollView>
106-
```
107-
108-
///
109-
110-
/// flavor svelte
111-
112-
```xml
113-
<scrollView orientation="horizontal">
114-
<stackLayout orientation="horizontal">
115-
<Label text="this" />
116-
<Label text="text" />
117-
<Label text="scrolls" />
118-
<Label text="horizontally" />
119-
<Label text="if necessary" />
120-
</stackLayout>
121-
</scrollView>
122-
```
123-
124-
///
125-
126-
/// flavor react
127-
128-
```xml
129-
<scrollView orientation="horizontal">
130-
<stackLayout orientation="horizontal">
131-
<Label text="this" />
132-
<Label text="text" />
133-
<Label text="scrolls" />
134-
<Label text="horizontally" />
135-
<Label text="if necessary" />
136-
</stackLayout>
137-
</scrollView>
138-
```
139-
140-
///
141-
-->
21+
<<< @/../examples/src/ui/ScrollView/template.xml#example
14222

14323
## Props
14424

14525
### orientation
14626

147-
```xml
148-
<ScrollView orientation="horizontal">
27+
```ts
28+
orientation: 'horizontal' | 'vertical'
14929
```
15030

151-
Gets or sets the direction in which the content can be scrolled: `horizontal` or `vertical`. Defaults to `vertical`.
31+
Gets or sets the direction in which the content can be scrolled.
15232

153-
---
33+
Defaults to `vertical`.
15434

15535
### scrollBarIndicatorVisible
15636

157-
```xml
158-
<ScrollView scrollBarIndicatorVisible="false">
37+
```ts
38+
scrollBarIndicatorVisible: boolean
15939
```
16040

161-
Specifies if the scrollbar is visible. Defaults to `true`.
41+
Specifies if the scrollbar is visible.
16242

163-
---
43+
Defaults to `true`.
16444

16545
### isScrollEnabled
16646

167-
```xml
168-
<ScrollView isScrollEnabled="false">
47+
```ts
48+
isScrollEnabled: boolean
16949
```
17050

171-
Gets or sets a value indicating whether scroll is enabled.
172-
173-
---
51+
Enables or disables scrolling of the ScrollView.
17452

175-
### verticalOffset
53+
### verticalOffset {#verticalOffset}
17654

17755
```ts
178-
verticalOffset: number = scrollView.verticalOffset
56+
verticalOffset: number
17957
```
18058

181-
Gets a value that contains the vertical offset of the scrolled content.
59+
Gets the vertical offset of the scrolled content.
18260

183-
---
184-
185-
### horizontalOffset
61+
### horizontalOffset {#horizontalOffset}
18662

18763
```ts
188-
horizontalOffset: number = scrollView.horizontalOffset
64+
horizontalOffset: number
18965
```
19066

191-
Gets a value that contains the horizontal offset of the scrolled content.
192-
193-
---
67+
Gets the horizontal offset of the scrolled content.
19468

19569
### scrollableHeight
19670

19771
```ts
198-
scrollableHeight: number = scrollView.scrollableHeight
72+
scrollableHeight: number
19973
```
20074

201-
Gets the maximum value for the [verticalOffset](#verticaloffset).
202-
203-
---
75+
Gets the maximum scrollable height, this is also the maximum value for the [verticalOffset](#verticalOffset).
20476

20577
### scrollableWidth
20678

20779
```ts
20880
scrollableWidth: number = scrollView.scrollableWidth
20981
```
21082

211-
Gets the maximum value for the [horizontalOffset](#horizontaloffset).
83+
Gets the maximum scrollable width, this is also the maximum value for the [horizontalOffset](#horizontalOffset).
21284

213-
---
85+
## Methods
21486

21587
### scrollToVerticalOffset()
21688

21789
```ts
218-
scrollView.scrollToVerticalOffset(value: number, animated: boolean)
90+
scrollToVerticalOffset(value: number, animated: boolean)
21991
```
22092

221-
Scrolls the content to the specified vertical offset position. Set `animated` to `true` for animated scroll, `false` for immediate scroll.
93+
Scrolls the content to the specified vertical offset.
22294

223-
---
95+
Set `animated` to `true` for animated scroll, `false` for immediate scroll.
22496

22597
### scrollToHorizontalOffset()
22698

22799
```ts
228-
scrollView.scrollToHorizontalOffset(value: number, animated: boolean)
100+
scrollToHorizontalOffset(value: number, animated: boolean)
229101
```
230102

231-
Scrolls the content to the specified horizontal offset position. Set `animated` to `true` for animated scroll, `false` for immediate scroll.
103+
Scrolls the content to the specified horizontal offset position.
232104

233-
---
105+
Set `animated` to `true` for animated scroll, `false` for immediate scroll.
234106

235107
## Events
236108

237109
### scroll
238110

239-
Emitted when a scroll event occurs. For the event's data, see [ScrollEventData Interface](https://docs.nativescript.org/api-reference/interfaces/scrolleventdata).
111+
```ts
112+
on('scroll', (args: ScrollEventData) => {
113+
const scrollView = args.object as ScrollView
114+
console.log('Scrolled', {
115+
scrollX: args.scrollX,
116+
scrollY: args.scrollY,
117+
})
118+
})
119+
```
240120

241-
---
121+
Emitted when the ScrollView is scrolled.
122+
123+
See [ScrollEventData](/api/interface/ScrollEventData).
242124

243125
## Native component
244126

‎examples/flows/screenshots.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,5 @@ output.screenshots = [
1212
'ListView',
1313
'Placeholder',
1414
'Progress',
15+
'ScrollView'
1516
]

‎examples/src/ui/ScrollView/template.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { EventData, Page } from '@nativescript/core'
2+
3+
// #region example
4+
const items = [`First`, `Second`, `Third`]
5+
// #endregion example
6+
7+
export function navigatingTo(args: EventData) {
8+
const page = <Page>args.object
9+
page.bindingContext = {
10+
items,
11+
}
12+
}

‎examples/src/ui/ScrollView/template.xml

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<Page navigatingTo="navigatingTo">
2+
<GridLayout rows="*, 50, 300, *">
3+
<ScrollView orientation="horizontal" row="1">
4+
<StackLayout orientation="horizontal" padding="12">
5+
<Label text="h1" width="50" />
6+
<Label text="h2" width="50" />
7+
<Label text="h3" width="50" />
8+
<Label text="h4" width="50" />
9+
<Label text="h5" width="50" />
10+
<Label text="h6" width="50" />
11+
<Label text="h7" width="50" />
12+
<Label text="h8" width="50" />
13+
<Label text="h9" width="50" />
14+
</StackLayout>
15+
</ScrollView>
16+
17+
<ContentView row="2">
18+
<!-- #region example -->
19+
<ScrollView>
20+
<StackLayout padding="12">
21+
<Label text="v1" height="50" />
22+
<Label text="v2" height="50" />
23+
<Label text="v3" height="50" />
24+
<Label text="v4" height="50" />
25+
<Label text="v5" height="50" />
26+
<Label text="v6" height="50" />
27+
<Label text="v7" height="50" />
28+
<Label text="v8" height="50" />
29+
<Label text="v9" height="50" />
30+
</StackLayout>
31+
</ScrollView>
32+
<!-- #endregion example -->
33+
</ContentView>
34+
</GridLayout>
35+
</Page>

0 commit comments

Comments
 (0)