SwiftUI - How to add selection to TabView - swift

Question

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}
}

Answer 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.
}
}
}
}