How to implement vertical scroll page on watchOS with SwiftUI

Question

I want to implement a vertical scroll page like system workout app.

Now I can get a similar effect with this:

    TabView {
      page1
        .rotationEffect(.degrees(90))
      page2
        .rotationEffect(.degrees(90))
    }.tabViewStyle(.page(indexDisplayMode: .automatic))
    .rotationEffect(.degrees(-90))

But not good as system workout app does. It supports digital crown and dynamic show indicator and custom color.

So , how to implement that vertical scroll effect?

This might help https://stackoverflow.com/questions/62533685/set-swiftui-pagetabviewstyle-vertical-flow-direction-in-tabview — Nirav D, Oct 14 '22 at 07:44
That is a custom `View` attached to the crown. You likely need the `TabView` with `selection` that is also set by this custom `View` — lorem ipsum, Oct 14 '22 at 13:33

Mojtaba Hosseini · Accepted Answer · 2023-06-16T11:00:50.360

1

In watchOS, you can apply .tabViewStyle(.carousel) on the TabView to make it exactly like you want:

TabView{
  Text("Page 1")
  Text("Page 2")
  Text("Page 3")
}
.tabViewStyle(.carousel) //  Here

It seems you should use .verticalPage from iOS 17

_{Note that this is only for the watchOS}

edited Jun 16 '23 at 11:00

answered Jun 16 '23 at 10:29

Mojtaba Hosseini

95,414
31
268
278

score 0 · Answer 2 · answered Oct 15 '22 at 01:05

0

https://github.com/fredyshox/PageView

This repo works well except crown supports.

answered Oct 15 '22 at 01:05

Haozes

352
2
12

How to implement vertical scroll page on watchOS with SwiftUI

2 Answers2