MAUI中实现上拉加载更多推荐使用CollectionView,通过监听Scrolled事件判断触底、配合IsLoadingMore状态与FooterTemplate显示加载提示,并在ViewModel中统一管理分页逻辑。

MAUI 中实现上拉加载更多,核心是监听 ListView 或 CollectionView 的滚动位置,当用户滑动到底部时触发分页请求。推荐使用 CollectionView(比 ListView 更现代、灵活),配合 INotifyCollectionChanged 和状态管理来完成平滑的分页加载。
用 CollectionView + IsRefreshing 实现上拉加载
MAUI 本身不直接支持“上拉加载”,但可通过监听 Scrolled 事件判断是否接近底部,并结合 IsRefreshing(下拉刷新控件)或自定义 Footer 实现视觉反馈。
- 在 XAML 中启用
Scrolled事件,并设置ItemsSource绑定到 ObservableCollection - 在后台代码中监听
ScrollX/ScrollY,结合VerticalOffset和ScrollableHeight判断是否触底(例如:VerticalOffset >= ScrollableHeight - 100) - 触底后检查是否正在加载、是否还有更多数据,满足条件则调用 LoadMoreAsync() 并更新集合
- 为避免重复触发,建议加锁或设置 loading 标志位(如
isLoadMoreBusy = true)
添加 Footer 模板显示加载状态
提升用户体验的关键是让用户感知“正在加载”。可在 CollectionView 中添加 FooterTemplate 显示加载指示器。
- 定义一个
DataTemplate作为 Footer,内含ActivityIndicator和提示文字 - 绑定 Footer 的
IsVisible到 ViewModel 中的IsLoadingMore属性 - 当加载完成或无更多数据时,清空 Footer 或切换为“没有更多了”提示
ViewModel 中管理分页逻辑(推荐)
把分页状态、页码、总数等放在 ViewModel 中,保持视图层干净,也方便单元测试和复用。
- 维护
CurrentPage、PageSize、HasMoreItems、IsLoadingMore等属性 -
LoadMoreAsync()方法中:先设IsLoadingMore = true→ 调用 API 获取下一页 → 合并到现有集合(Items.AddRange(newItems))→ 更新CurrentPage和HasMoreItems - 注意:ObservableCollection 添加多条数据时,逐个 Add 会多次触发 UI 更新;可改用第三方库如
CommunityToolkit.Maui的BatchUpdate,或临时替换整个集合(需确保 INotifyCollectionChanged 正确触发)
替代方案:用第三方库简化开发
如果不想手动处理滚动计算和状态同步,可用成熟组件:
-
Sharpnado.HorizontalListView(虽主打横向,但其
LoadMoreBehavior思路可参考) -
CommunityToolkit.Maui 提供增强的 CollectionView 扩展(如
BindableLayout+ 自定义行为) - 自定义 Behavior:封装一个
LoadMoreBehavior,附加到 CollectionView 上,内部处理触底检测和事件回调,复用性更高
基本上就这些。MAUI 分页不复杂但容易忽略滚动精度、重复加载、空状态处理等细节。重点是把加载逻辑收口到 ViewModel,用好 ObservableCollection 和绑定通知,再配合适当的 UI 反馈,体验就很稳了。










