android 列表无限滑动分页,SwiftUI 2.0 实现无限滚动的分页列表List和Scrollview两版(高性能含源码)...

本文价值与收获

看完本文后,您将能够作出下面的界面

ebbb3c33186631c1a17483c00922d3fe.png

无限滚动的分页列表

2637dd96ab0ee8608935682a77bcdb88.gif

无限滚动的分页列表

实战需求

我们平时构建的应用基本上都是列表类应用,例如待办事项列表、微博、微信朋友圈和视频列表等。这些列表都是可以无限滚动的,那这个功能该如何实现呢。本篇文章将告诉大家个非常简单高效的构建无限滚动List的方法,而且该方法还不会有性能问题。

列表实现目前有两种方法,一种List,另外一种Scrollview。在wwdc20之前,我不太推荐大家使用ScrollView,但是wwdc20对scrollview进行了全面改造,在性能和灵活性上都有很大提高。下面我就给大家制作两版无限分页列表。

实战代码

1、List版

struct EndlessList: View {

@StateObject var dataSource = ContentDataSource()

var body: some View {

List {

ForEach(dataSource.items) { item in

Text(item.label)

.onAppear {

dataSource.loadMoreContentIfNeeded(currentItem: item)

}

.padding(.all, 30)

}

if dataSource.isLoadingPage {

ProgressView()

}

}

}

}

2、scrollview版

struct EndlessList2: View {

@StateObject var dataSource = ContentDataSource()

var body: some View {

ScrollView {

LazyVStack {

ForEach(dataSource.items) { item in

Text(item.label)

.onAppear {

dataSource.loadMoreContentIfNeeded(currentItem: item)

}

.padding(.all, 30)

}

if dataSource.isLoadingPage {

ProgressView()

}

}

}

}

}

3、模拟数据源

```

struct ListItem:Identifiable{

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值