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