How to enable vertical page scrolling
About 2 min
How to enable vertical page scrolling 관련
SwiftUI by Example
Back to Home
How to enable vertical page scrolling | SwiftUI by Example
How to enable vertical page scrolling
Updated for Xcode 15
New in watchOS 10
SwiftUI provides a .verticalPage tab view style that allows us to make vertically scrolling tabs on watchOS, as opposed to the default horizontal. Because these live alongside scrolling lists, it's really important you think carefully about mixing the two.
First, here's a simple code sample:
TabView {
Text("First")
.navigationTitle("First Title")
Text("Second")
.navigationTitle("Second Title")
Text("Third")
.navigationTitle("Third Title")
}
.tabViewStyle(.verticalPage)
watchOS will automatically use each tab's navigation title as the user scrolls through.
When dealing with other scrolling containers inside tabs, it's imperative you keep scrolling to the last view in a tab, otherwise users might be trying to flick through and accidentally change tabs instead.
So, in this code sample there are two regular tabs, followed by a scrolling list:
TabView {
Text("First")
.navigationTitle("First Title")
Text("Second")
.navigationTitle("Second Title")
List(1..<50) { i in
Text("Row \(i)")
}
.navigationTitle("Third Title")
}
.tabViewStyle(.verticalPage)
Similar solutions…
How to add horizontal and vertical scrolling using ScrollView | SwiftUI by Example
How to add horizontal and vertical scrolling using ScrollView
How to create scrolling pages of content using tabViewStyle() | SwiftUI by Example
How to create scrolling pages of content using tabViewStyle()
How to enable editing on a list using EditButton | SwiftUI by Example
How to enable editing on a list using EditButton
How to enable pull to refresh | SwiftUI by Example
How to enable pull to refresh
How to disable ScrollView clipping so contents overflow | SwiftUI by Example
How to disable ScrollView clipping so contents overflow
