1

I have a JSON API, and I want to show the content inside the PageTabView. It is successful, but the view becomes laggy every time I swipe the page and I got the solution here https://stackoverflow.com/a/66591530/15132219. But the problem is now the page dots doesn't want to change every time I swipe the page. I have tried to solve it for days but still can't find the solution, Here is my Code (I can't show the API link as it's not shareable)

struct HomeBanner: View{
    @State var banners: [BannerJSON] = []
    private let timer = Timer.publish(every: 5, on: .main, in: .common).autoconnect()
    @State var index = 0
    var body: some View{
        
        let bannerPic = "API_LINK"
        
        GeometryReader{ geometry in
            VStack(spacing: 2){
                if banners.isEmpty{
                    Spacer()
                    ProgressView()
                    Spacer()
                }else{
                    VStack{
                        ZStack{
                            TabView(selection: $index){
                                ForEach(banners, id: \.id){banner in
                                    VStack{
                                        //MARK: Display Banner
                                        NavigationLink(destination: DetailBanner(banner: banner
                                        )){
                                            WebImage(url: URL(string: bannerPic + banner.IMAGE))
                                                .resizable()
                                                .scaledToFit()
                                        }
                                    }
                                }
                            }.tabViewStyle(PageTabViewStyle())
                            .frame(width: geometry.size.width, height: geometry.size.height / 3.5)
                        }
                    }
                }
            }.onAppear{
                getBannerData(url: "API_LINK"){
                    (banners) in
                    self.banners = banners
                }
            }
        }
    }
}

struct BannerJSON{
    var RECORD_STATUS: String
    var IMAGE: String
    var URL_LINK: String
    var TITLE: String
    var DESCRIPTION: String
}

extension BannerJSON: Identifiable, Decodable{
    var id: String {return TITLE}
}
GuardianKnight
  • 63
  • 1
  • 8

1 Answers1

1
struct SampleTabView: View {
    @State var selectedIndex: Int = 0
    @State var banners: [Int] = [0,1,2,3,4,5]
    var body: some View {
        TabView(selection: $selectedIndex){
            ForEach(0..<banners.count, id: \.self){ idx in
                Text(banners[idx].description)
                    .tag(idx)//This line is crutial for selection to work put in on the VStack
                    //You can also make the tag the banner in your loop but your selection variable must be a Banner too. 
            }
        }
    }
}
lorem ipsum
  • 21,175
  • 5
  • 24
  • 48