frendguo's blog

UWP中的上拉加载

上拉加载在日常使用中再常见不过了, 实现起来也有很多种方法. 刚刚简单了实现了下, 以后发现坑了, 再回来填吧~

先上结果图:

以下就是具体的实现过程:

  1. 界面部分, 这里使用的是ListView, 虽然ListView是有Scroll的, 但是具体在实现的过程中会比较麻烦, 所以我这里用了ScrollView嵌套在ListView外面. 再注册ViewChanged事件.
    <ScrollViewer x:Name="ListScroll" ViewChanged="ListScroll_ViewChanged"
        HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" >
        <ListView ItemsSource="{x:Bind newsHeaders, Mode=OneWay}"
              IsItemClickEnabled="True"
              ItemClick="ListView_ItemClick"
              ItemTemplate="{StaticResource NewsListViewTemplate}">
    
        </ListView>
    </ScrollViewer>
    
  2. 接下来就是处理ViewChanged事件. 这里主要是判断ScrollView垂直滚动的距离(例子中的: ListScroll.VerticalOffset)和可滚动区域的垂直大小(例子中的: ListScroll.ScrollableHeight)的相对距离. 比如此例中的
     ListScroll.VerticalOffset >= ListScroll.ScrollableHeight - 500 
    以此条件做为获取下一页面的条件. 值得注意的是这里的flag变量. 通过调试发现, 滚动过程中可能会触发事件多次, 而且触发第一次后, ScrollableHeight还没来得及改变, 这也就导致了多次加载. 所以这里放了个flag变量, 用于防止数据被多次加载.(不过总感觉还会有问题, 还是等出问题了再说吧~)
    private async void ListScroll_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        if (_flag)
        {
            return;
        }
        if (ListScroll.VerticalOffset <= ListScroll.ScrollableHeight - 500)
        {
            return;
        }
        _flag = true;
        // 加载下一页
        try
        {
            NewsListResult newsResult;
            // 新开个线程, 用于数据获取
            await Task.Factory.StartNew(async () =>
            {
                // 调用UI线程获取数据
                await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
               {
    
                   newsResult = await Tools.GetNewsList(_pageIndex);
                   _flag = false;
                   if (newsResult != null)
                   {
                       newsResult.NewsHeaderList.NewsHeader.ForEach(p => newsHeaders.Add(p));
                       _pageIndex++;
    
                   }
               });
            });
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex.Message);
            // throw;
        }
    }
    
  3. 至于数据绑定部分, 这里就不详细说了.

最后附上一个链接: https://social.msdn.microsoft.com/Forums/zh-CN/895d9dd8-8872-4d4c-b9d3-f0287fdf8442/uwp03gridviewlistview-?forum=window10app

收工, 打完回家~

Happy Coding!o(* ̄▽ ̄*)o

Add comment

Loading