想要实现一个上下分页滑动,左右分页滑动的交互效果
var body: some View{ ScrollView(showsIndicators: false){ LazyVStack(spacing:0){ ForEach(1...10, id: \.self){ index in ScrollView(.horizontal,showsIndicators: false){ LazyHStack(spacing:0){ VStack { Text("Left View \(index)") .font(.system(.largeTitle)) .foregroundStyle(.white) } .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.black) .containerRelativeFrame([.horizontal,.vertical]) VStack { Text("Right View \(index)") .font(.system(.largeTitle)) .foregroundStyle(.white) } .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.blue) .containerRelativeFrame([.horizontal,.vertical]) }.scrollTargetLayout() } .ignoresSafeArea() .containerRelativeFrame([.horizontal,.vertical]) .scrollTargetBehavior(.paging) .onAppear(perform: { UIScrollView.appearance().bounces = false UIScrollView.appearance().alwaysBounceVertical = false UIScrollView.appearance().alwaysBounceHorizOntal= false }) } }.scrollTargetLayout() } .ignoresSafeArea() .containerRelativeFrame([.horizontal,.vertical]) .scrollTargetBehavior(.paging) }
目前用这种方式实现,但是有个问题,滑动到 RightView 可以上下滑动到下一层,有什么办法在滑动到 RightView 时只允许左滑回 Left View
![]() | 1 xieweizhi007 2024-07-27 17:04:43 +08:00 |
![]() | 2 kemchenj 2024-07-27 22:53:34 +08:00 最外层的 ScrollView 可以用 scrollDisabled(:_) 去控制是否禁用滚动手势,在内层的 ScrollView 用 GeometryReader 之类的监控一下 offset ,判断是否需要禁用滚动手势 |