fermoya / SwiftUIPager

Native Pager in SwiftUI
MIT License
1.27k stars 166 forks source link

Multiple Page nesting causes sliding bug #326

Open ETmanwenhan opened 11 months ago

ETmanwenhan commented 11 months ago

Describe the bug When two secondary pages turn pages, when switching subpages in the second Page, and then click the subpage of a Page, the first Page is stuck.

To Reproduce

//
//  PageHomeView.swift
//  Demo-SwiftUI
//
//  Created by Steven on 15/9/2023.
//

import SwiftUI
import SwiftUIPager
import AxisSegmentedView

/// 菜单
fileprivate struct Menus {
    static let Charm: String = "Charm"
    static let Rich: String = "Rich"
}

struct PageHomeView: View {

    // Page
    @StateObject private var page: Page = .first()

    /// 偏移量
    @State private var pageOffset: Double = 0

    /// 选中下标
    @State var selectIndex: Int = 0

    /// 菜单分类
    @State var menu: [String] = [Menus.Charm, Menus.Rich]

    /// 环境值
    @Environment(\.presentationMode) var presentation

    var body: some View {
        // 垂直布局
        VStack {
            Spacer()
                .frame(height: 44)

            HStack {
                // 间隔
                Spacer()
                    .frame(width: 16)

                // 返回
                Image("zy_nav_back_white")
                    .frame(width: 30, height: 30)
                    .onTapGesture {
                        self.presentation.wrappedValue.dismiss()
                    }

                // 间隔
                Spacer()
                    .frame(width: 10)

                // 分段控制器
                AxisSegmentedView(selection: $selectIndex, constant: .init()) {
                    ForEach(0..<menu.count) { (i) in
                        Text(menu[i])
                            .foregroundColor(Color.black)
                            .font(Font.system(size: 18))
                            .itemTag(i) {
                                Text(menu[i])
                                    .foregroundColor(Color.white)
                                    .font(Font.system(size: 22))
                            }
                    }
                } style: {
                    ASBasicStyle()
                } onTapReceive: { selectionTap in
                    withAnimation {
                        self.page.update(.new(index: selectionTap))
                    }
                }
                .frame(width: 260, height: 50)

                Spacer()
            }

            // Page页面
            Pager(page: self.page,
                  data: self.menu,
                  id: \.self) { page in
                    // 子页面
                    switch page {
                    case Menus.Charm:
                        MainListView()
                    default:
                        MainListView()
                    }
                }
                  .swipeInteractionArea(.page)
                  .onPageChanged { (index) in
                      selectIndex = index
                  }
                  .background(Color.clear)
        }
    }
}

MainListView.swift

//
//  MainListView.swift
//  Demo-SwiftUI
//
//  Created by Steven on 15/9/2023.
//

import SwiftUI
import SwiftUIPager
import AxisSegmentedView

/// 菜单
fileprivate struct Menus {
    static let List1: String = "List1"
    static let List2: String = "List2"
}

struct MainListView: View {

    // Page
    @StateObject private var page: Page = .first()

    /// 偏移量
    @State private var pageOffset: Double = 0

    /// 选中下标
    @State var selectIndex: Int = 0

    /// 菜单分类
    var menu: [String] = [Menus.List1, Menus.List2]

    /// 环境值
    @Environment(\.presentationMode) var presentation

    var body: some View {
        // 垂直布局
        VStack {
            Spacer()
                .frame(height: 44)

            HStack {

                // 间隔
                Spacer()
                    .frame(width: 10)

                // 分段控制器
                AxisSegmentedView(selection: $selectIndex, constant: .init()) {
                    ForEach(0..<menu.count) { (i) in
                        Text(menu[i])
                            .foregroundColor(Color.black)
                            .font(Font.system(size: 18))
                            .itemTag(i) {
                                Text(menu[i])
                                    .foregroundColor(Color.white)
                                    .font(Font.system(size: 22))
                            }
                    }
                } style: {
                    ASBasicStyle()
                } onTapReceive: { selectionTap in
                    withAnimation {
                        self.page.update(.new(index: selectionTap))
                    }
                }
                .frame(width: 260, height: 50)

                Spacer()
            }

            // Page页面
            Pager(page: self.page,
                  data: self.menu,
                  id: \.self) { page in
                    // 子页面
                    switch page {
                    case Menus.List1:
                        SimpleListView()
                    default:
                        SimpleListView()
                    }
                }
                  .swipeInteractionArea(.page)
                  .onPageChanged { (index) in
                      selectIndex = index
                  }
                  .background(Color.clear)
        }
    }
}
//
//  SimpleListView.swift
//  Demo-SwiftUI
//
//  Created by Steven on 15/9/2023.
//

import SwiftUI

struct SimpleListView: View {

    var body: some View {
        ScrollView {
            ForEach(0..<2000) { (item) in
                Text("\(item)")
            }
        }
    }
}

Pager

pod 'SwiftUIPager'

Expected behavior Click on the "Rich" page, click on "Llist2", and then switch to the "Charm" page to slide List1 and List

Screenshots / Videos

https://github.com/fermoya/SwiftUIPager/assets/5837888/529699de-3f2f-4d90-b855-a9635be01c1e

Environment: