Xamarin.Forms社交项目：实现帖子分页滚动加载功能求助

Hey Dan, let's get that paginated feed working in your Xamarin.Forms social media app. Here's a practical, step-by-step approach to implement the load-as-you-scroll feature you need:

First, you'll need to modify your backend to support pagination parameters instead of the sections value you were testing. Using page and pageSize is a standard approach that's easier to maintain:

// Handle pagination parameters with sensible defaults
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$pageSize = isset($_POST['pageSize']) ? intval($_POST['pageSize']) : 10;
$offset = ($page - 1) * $pageSize;

// Query followed users' posts, sorted by timestamp descending, with pagination
$query = "SELECT * FROM posts 
          WHERE user_id IN (SELECT followed_id FROM follows WHERE follower_id = ?) 
          ORDER BY timestamp DESC 
          LIMIT ?, ?";

// Bind your user ID, offset, and pageSize parameters here to execute the query
// Return the fetched posts as JSON to the frontend

This setup lets you fetch exactly 10 posts per request, starting from the correct offset based on the current page number.

We'll use CollectionView (the modern alternative to ListView) since it has built-in support for load-more functionality and better scrolling performance.

Step 2.1 ViewModel Setup #

Create a ViewModel to handle data loading, pagination state, and commands:

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;
using Xamarin.Forms;
using Newtonsoft.Json; // Or use System.Text.Json
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace YourAppNamespace.ViewModels
{
    public class FeedViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<Post> Posts { get; set; } = new ObservableCollection<Post>();
        
        private int _currentPage = 1;
        private const int PageSize = 10;
        private bool _isLoading;
        private bool _hasMoreData = true;

        public bool IsLoading
        {
            get => _isLoading;
            set { _isLoading = value; OnPropertyChanged(); }
        }

        public bool HasMoreData
        {
            get => _hasMoreData;
            set { _hasMoreData = value; OnPropertyChanged(); }
        }

        public ICommand LoadMoreCommand => new Command(async () => await LoadMorePostsAsync());

        public FeedViewModel()
        {
            // Load first page when the ViewModel initializes
            _ = LoadInitialPostsAsync();
        }

        private async Task LoadInitialPostsAsync()
        {
            IsLoading = true;
            try
            {
                var initialPosts = await FetchPostsFromApi(_currentPage, PageSize);
                foreach (var post in initialPosts)
                {
                    Posts.Add(post);
                }
                // If we get fewer than 10 posts, there's no more data to load
                if (initialPosts.Count < PageSize)
                {
                    HasMoreData = false;
                }
            }
            catch (System.Exception ex)
            {
                // Handle errors (e.g., show a toast or alert to the user)
                System.Diagnostics.Debug.WriteLine($"Initial load error: {ex.Message}");
            }
            finally
            {
                IsLoading = false;
            }
        }

        private async Task LoadMorePostsAsync()
        {
            // Prevent duplicate requests if already loading or no more data exists
            if (IsLoading || !HasMoreData) return;

            IsLoading = true;
            _currentPage++;
            try
            {
                var newPosts = await FetchPostsFromApi(_currentPage, PageSize);
                foreach (var post in newPosts)
                {
                    Posts.Add(post);
                }
                // Disable load-more if we get fewer than 10 posts
                if (newPosts.Count < PageSize)
                {
                    HasMoreData = false;
                }
            }
            catch (System.Exception ex)
            {
                // Roll back page number if request fails
                _currentPage--;
                System.Diagnostics.Debug.WriteLine($"Load more error: {ex.Message}");
            }
            finally
            {
                IsLoading = false;
            }
        }

        // Replace with your actual API call logic
        private async Task<List<Post>> FetchPostsFromApi(int page, int pageSize)
        {
            using var client = new HttpClient();
            var formData = new FormUrlEncodedContent(new Dictionary<string, string>
            {
                {"page", page.ToString()},
                {"pageSize", pageSize.ToString()}
            });

            var response = await client.PostAsync("your-api-endpoint-url", formData);
            response.EnsureSuccessStatusCode();
            var jsonResponse = await response.Content.ReadAsStringAsync();
            
            return JsonConvert.DeserializeObject<List<Post>>(jsonResponse);
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    // Your Post model class (match the JSON structure from your API)
    public class Post
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Content { get; set; }
        public string Timestamp { get; set; }
        // Add other post properties as needed
    }
}

Step 2.2 XAML Page Setup #

Bind the ViewModel to your feed page and configure the CollectionView:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:YourAppNamespace.ViewModels"
             x:Class="YourAppNamespace.Views.FeedPage">
    <ContentPage.BindingContext>
        <vm:FeedViewModel />
    </ContentPage.BindingContext>

    <CollectionView ItemsSource="{Binding Posts}"
                    LoadMoreCommand="{Binding LoadMoreCommand}"
                    IsLoadMoreRunning="{Binding IsLoading}"
                    LoadMoreVisibility="{Binding HasMoreData}">
        
        <!-- Template for individual posts -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Frame Margin="10" Padding="15" CornerRadius="8">
                    <StackLayout>
                        <Label Text="{Binding Title}" FontSize="Headline" Margin="0,0,0,5"/>
                        <Label Text="{Binding Content}" FontSize="Body"/>
                        <Label Text="{Binding Timestamp, StringFormat='Posted: {0:yyyy-MM-dd HH:mm}'}" 
                               FontSize="Caption" TextColor="Gray" Margin="0,10,0,0"/>
                    </StackLayout>
                </Frame>
            </DataTemplate>
        </CollectionView.ItemTemplate>

        <!-- Loading indicator shown when fetching more posts -->
        <CollectionView.Footer>
            <StackLayout IsVisible="{Binding IsLoading}" Padding="20">
                <ActivityIndicator IsRunning="True" HorizontalOptions="Center"/>
                <Label Text="Loading more posts..." HorizontalOptions="Center" Margin="0,5,0,0"/>
            </StackLayout>
        </CollectionView.Footer>
    </CollectionView>
</ContentPage>

• Prevent Duplicate Requests: The IsLoading flag ensures we don't send multiple API calls while waiting for a response.
• Error Recovery: If a load-more request fails, we roll back the page number so the next attempt uses the correct page.
• Performance: CollectionView uses virtualization by default, so it only renders visible posts—critical for keeping memory usage low with large datasets.
• Empty States: Add a fallback view for when there are no posts at all, or when all posts have been loaded (e.g., a "No more posts" label).

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