上拉加载:
无论是在List或者ScrollView,都是通过在尾行添加隐藏控件,在其onAppear()方法中实现加载数据。
这并不是最好的解决方案,但是确实可行。未来此方案在SwiftUI配套设施更加完善后应该被替换掉。
ScrollView/List:
iOS14的List建议使用ScrollVIew + LazyVStack的方式实现。目前SwiftUI的List比较古板,不太容易定制化。如果执意使用List,此方案也可以实现。
struct DemoView: View {
// 数据源
@State private var dataSource: [String] = []
// 刷新状态绑定
@State private var isRefreshing: Bool = false
// 页码
@State private var page: Int = 0
private var refreshListener: some View {
// 一个任意视图,我们将把它添置在滚动列表的尾部
LoadingView(isLoading: $isRefreshing)
.frame(width: 150, height: 35) // height: 如果有加载动画就设置,没有设置为0就可以
.onAppear(perform: {
page += 1
loadData()
})
}
private func loadData() {
isRefreshing = true
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
// 伪代码,模拟数据网络加载
dataSource += newDataSource
isRefreshing = false
}
}
var body: some View {
// 1.如果使用ScrollView
ScrollView(.vertical) {
// 使用懒加载,确保滑动到再Appear。
LazyVStack {
ForEach(0..<dataSource.count, id: \.self) { index in
Text("\(dataSource[index])")
}
// 加载更多
refreshListener
}
}
.onAppear {
// 页面出现获取数据
loadData()
}
// 2.如果使用List
/*
List {
LazyVStack {
ForEach(0..<dataSource.count, id: \.self) { index in
Text("\(dataSource[index])")
}
// 加载更多
refreshListener
}
}
.onAppear {
// 页面出现获取数据
loadData()
}
*/
}
}
网友评论