想要实现一个上下分页滑动,左右分页滑动的交互效果
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
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.