MAUI中如何检测ScrollView滚动至底部以实现无限滚动

下面提供两种实用的实现方式，帮你实现滚动到底部加载下一页数据的需求：

方法一：直接监听ScrollView的Scrolled事件 #

这种方式简单直接，适合快速实现需求：

1. XAML中绑定事件

<ScrollView x:Name="MainScrollView" Scrolled="OnScrollViewScrolled">
    <!-- 承载列表项的容器，比如VerticalStackLayout -->
    <VerticalStackLayout x:Name="ItemsContainer">
        <!-- 这里放置你的列表项模板 -->
    </VerticalStackLayout>
</ScrollView>

2. 后台代码实现滚动判断与加载逻辑

private bool _isLoading = false; // 防止重复触发加载请求
private int _currentPage = 1;

private void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
    if (_isLoading) return;

    var scrollView = sender as ScrollView;
    // 计算滚动相关的高度参数
    var totalContentHeight = scrollView.ContentSize.Height;
    var currentScrollPosition = e.ScrollY;
    var viewportHeight = scrollView.Height;

    // 当滚动位置接近底部（预留20px阈值，提升用户体验）时触发加载
    if (currentScrollPosition + viewportHeight >= totalContentHeight - 20)
    {
        _isLoading = true;
        _ = LoadNextPageAsync();
    }
}

private async Task LoadNextPageAsync()
{
    try
    {
        // 调用REST接口获取下30条数据
        var nextItems = await YourApiService.GetItemsAsync(_currentPage + 1, 30);
        if (nextItems.Any())
        {
            _currentPage++;
            // 将新数据添加到视图容器中
            foreach (var item in nextItems)
            {
                ItemsContainer.Add(new YourItemView { BindingContext = item });
            }
        }
    }
    catch (Exception ex)
    {
        // 这里处理加载异常，比如提示用户加载失败
    }
    finally
    {
        _isLoading = false;
    }
}

方法二：用自定义Behavior实现可复用的滚动检测 #

这种方式更优雅，适合在多个页面复用滚动到底部的逻辑：

1. 创建自定义Behavior类

public class ScrollViewBottomDetectionBehavior : Behavior<ScrollView>
{
    public static readonly BindableProperty OnReachBottomCommandProperty =
        BindableProperty.Create(nameof(OnReachBottomCommand), typeof(ICommand), typeof(ScrollViewBottomDetectionBehavior));

    public ICommand OnReachBottomCommand
    {
        get => (ICommand)GetValue(OnReachBottomCommandProperty);
        set => SetValue(OnReachBottomCommandProperty, value);
    }

    // 触发加载的底部阈值，可自定义
    public double BottomThreshold { get; set; } = 20;

    private ScrollView _scrollView;
    private bool _isExecuting;

    protected override void OnAttachedTo(ScrollView scrollView)
    {
        base.OnAttachedTo(scrollView);
        _scrollView = scrollView;
        _scrollView.Scrolled += OnScrolled;
    }

    protected override void OnDetachingFrom(ScrollView scrollView)
    {
        base.OnDetachingFrom(scrollView);
        _scrollView.Scrolled -= OnScrolled;
        _scrollView = null;
    }

    private void OnScrolled(object sender, ScrolledEventArgs e)
    {
        if (_isExecuting || OnReachBottomCommand == null || !OnReachBottomCommand.CanExecute(null))
            return;

        var totalContentHeight = _scrollView.ContentSize.Height;
        var currentScrollPosition = e.ScrollY;
        var viewportHeight = _scrollView.Height;

        if (currentScrollPosition + viewportHeight >= totalContentHeight - BottomThreshold)
        {
            _isExecuting = true;
            OnReachBottomCommand.Execute(null);
            _isExecuting = false;
        }
    }
}

2. XAML中使用Behavior并绑定命令

<ScrollView>
    <ScrollView.Behaviors>
        <local:ScrollViewBottomDetectionBehavior 
            OnReachBottomCommand="{Binding LoadNextPageCommand}"
            BottomThreshold="30" />
    </ScrollView.Behaviors>
    <!-- 使用BindableLayout绑定列表数据 -->
    <VerticalStackLayout BindableLayout.ItemsSource="{Binding Items}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <!-- 列表项的布局模板 -->
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </VerticalStackLayout>
</ScrollView>

3. ViewModel中实现加载命令

public class YourViewModel : INotifyPropertyChanged
{
    public ICommand LoadNextPageCommand { get; }
    private bool _isLoading;
    private int _currentPage = 1;
    public ObservableCollection<YourItemModel> Items { get; } = new();

    public YourViewModel()
    {
        LoadNextPageCommand = new Command(async () => await LoadNextPageAsync());
    }

    private async Task LoadNextPageAsync()
    {
        if (_isLoading) return;
        _isLoading = true;

        try
        {
            var nextItems = await YourApiService.GetItemsAsync(_currentPage + 1, 30);
            if (nextItems.Any())
            {
                _currentPage++;
                foreach (var item in nextItems)
                {
                    Items.Add(item);
                }
            }
        }
        catch (Exception ex)
        {
            // 处理加载异常
        }
        finally
        {
            _isLoading = false;
        }
    }

    // 实现INotifyPropertyChanged接口的代码...
}

注意事项 #

• 必须添加_isLoading标志，避免用户快速滚动时重复触发接口请求。
• 可根据需求调整BottomThreshold的值，提前触发加载能让用户体验更流畅。
• 如果你的列表可以改用MAUI的CollectionView，它自带RemainingItemsThreshold属性，能更简单地实现自动加载。

内容的提问来源于stack exchange，提问作者Frank Mehlhop