SwiftUI在列表上(ScrollView/List)實現(xiàn)上拉加載更多

上拉加載:

無論是在List或者ScrollView,都是通過在尾行添加隱藏控件,在其onAppear()方法中實現(xiàn)加載數(shù)據(jù)。

這并不是最好的解決方案,但是確實可行。未來此方案在SwiftUI配套設施更加完善后應該被替換掉。

ScrollView/List:

iOS14的List建議使用ScrollVIew + LazyVStack的方式實現(xiàn)。目前SwiftUI的List比較古板,不太容易定制化。如果執(zhí)意使用List,此方案也可以實現(xiàn)。

struct DemoView: View {
  // 數(shù)據(jù)源
  @State private var dataSource: [String] = []
  // 刷新狀態(tài)綁定
  @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) { 
       // 偽代碼,模擬數(shù)據(jù)網絡加載
       dataSource += newDataSource
       isRefreshing = false
     }
  }
  
  var body: some View {
    // 1.如果使用ScrollView
    ScrollView(.vertical) {
      // 使用懶加載,確?;瑒拥皆貯ppear。
      LazyVStack {
          ForEach(0..<dataSource.count, id: \.self) { index in 
            Text("\(dataSource[index])")
          }
          // 加載更多
          refreshListener
      }
    }
    .onAppear {
      // 頁面出現(xiàn)獲取數(shù)據(jù)
      loadData()
    }
    
    // 2.如果使用List
  /*
    List {
      LazyVStack {
        ForEach(0..<dataSource.count, id: \.self) { index in 
            Text("\(dataSource[index])")
          }
          // 加載更多
          refreshListener
      }
    }
    .onAppear {
      // 頁面出現(xiàn)獲取數(shù)據(jù)
      loadData()
    }
  */
  }
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容