so I've implemented pagination to some extent, however, there is a bug. I can only seem to execute self.searchViewModel.loadMoreData()
once, and that's only when the view has been presented.
This is my full-code:
@State var time = Timer.publish(every: 0.1, on: .main, in: .tracking).autoconnect()
var body: some View {
ZStack {
Color(SYSTEM_BACKGROUND_COLOUR)
.edgesIgnoringSafeArea(.all)
GeometryReader { geometry in
VStack(alignment: .center) {
ScrollView(.vertical, showsIndicators: false) {
VStack {
VStack(alignment: .leading) {
if !self.searchViewModel.isLoading {
VStack {
ForEach(self.searchViewModel.post, id: \.postID) { post in
VStack {
HeaderCell(post: post)
FooterCell(post: post)
.onAppear {
self.time = Timer.publish(every: 0.1, on: .main, in: .tracking).autoconnect()
}
.onReceive( self.searchViewModel.time) { (_) in
if geometry.frame(in: .global).maxY < UIScreen.main.bounds.height - 80{
print("Getting data")
self.searchViewModel.loadMoreData()
self.time.upstream.connect().cancel()
}
}
}
}
}
}
}
}
}
}
}
}.navigationBarTitle(Text("Results"), displayMode: .inline)
}
I really believe it's because time
isn't changing it's state. As the console only prints "Getting data" once. Once I scroll to the end of my view, after the next group of data has been collected and presented, nothing happens. I've been trying to sort this for hours.
I have read about how @Binding
is much better to use, but I get constant errors whenever I try to implement it.
In essence, I just want to detect when the user has scrolled all the way to the bottom of my ScrollView
so that I can call the function to get the next batch of information. I've tried almost every solution possible but no luck. I've shifted and changed both the onAppear
& onReceived
methods everywhere within my view.
Any help would be really appreciated.