17370845950

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 反馈，体验就很稳了。