zoukankan      html  css  js  c++  java
  • UWP开发入门(七)——下拉刷新

      本篇意在给这几天Win10 Mobile负面新闻不断的某软洗地,想要证明实现一个简单的下拉刷新并不困难。UWP开发更大的困难在于懒惰,缺乏学习的意愿。而不是“某软连下拉刷新控件都没有”这样的想法。

      之前我也没有进行过下拉刷新的研究。于是先去google了几篇blog学习了一下,然后再看了某软官方的Sample。(同学们啊官方有下拉刷新的Sample啊!就在Git上啊!不要钱无门槛啊!)学习之后发现实现的方式大体分为两类。

      一类是以某软Sample和博客园MS-UAP封装的PullToRefreshBox为代表,将一片“释放刷新”区域和一个ListView上下排列放置到一个ScrollView中。初始通过向下滚动ScrollView将“释放刷新”区域上移至不可见,在每次向上滚动显示“释放刷新”区域时,触发ScrollViewViewChanged事件来进行加载新数据。完成新数据加载后,再次将“释放刷新”区域上移隐藏。

      另一类是通过附加属性来获取ListView内部的ScrollView,并检测内部ScrollView的相关Manpulation事件来实现数据刷新。

      考虑到附加属性稍稍超出入门范围,且第一类代码可以写得较为简单。故采用ScrollView嵌套的方法,给出一个极简的下拉刷新实现,虽并不能应对所有的需求,但考虑到30行不到的代码量,绝对你值得拥有!

      首先是XAML的代码,平淡无奇没有任何高深的技巧:

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            
            <ScrollViewer x:Name="scrollViewer"
                         Loaded="scrollViewer_Loaded"
                          ViewChanged="scrollViewer_ViewChanged">
    
                <StackPanel Orientation="Vertical">
                    <ProgressRing IsActive="{x:Bind IsPullRefresh,Mode=OneWay}" Height="30"></ProgressRing>
                    <ListView x:Name="list" ItemsSource="{x:Bind Items}" ></ListView>
                </StackPanel>
                
            </ScrollViewer>
        </Grid>

      再来看cs文件。首先是ItemsIsPullRefresh属性的定义,前者是ListView中的数据集,后者BindingProgressRingIsActive属性,这里略过不表。

      值得注意的仅有scrollViewer_LoadedscrollViewer_ViewChanged两个方法。scrollViewerLoad方法里,我们在初始状态下将ScrollViewer向上滚动了30px,正好将ProgressRing隐藏了起来。然后是scrollViewer_ViewChanged方法,IsIntermediate属性指出滑动是否还在进行中,如果不是并且到达顶部了,就去加载新的数据,同时控制ProgressRing的菊花转圈圈。最后,再将ScrollViewer向上滚动30px藏起ProgressRing

        public sealed partial class MainPage : Page, INotifyPropertyChanged
        {
            public ObservableCollection<object> Items { get; set; }
    
            public bool IsPullRefresh
            {
                get
                {
                    return _isPullRefresh;
                }
    
                set
                {
                    _isPullRefresh = value;
                    OnPropertyChanged(nameof(IsPullRefresh));
                }
            }
    
            bool _isPullRefresh = false;
    
            public MainPage()
            {
                this.InitializeComponent();
    
                Items = new ObservableCollection<object>();
                for (int i = 0; i < 40; i++)
                {
                    Items.Add(i);
                }
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            public void OnPropertyChanged(string name)
            {
                this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
            }
    
            private void scrollViewer_Loaded(object sender, RoutedEventArgs e)
            {
                scrollViewer.ChangeView(null, 30, null);
            }
    
            private async void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
            {
                var sv = sender as ScrollViewer;
    
                if (!e.IsIntermediate)
                {
                    if (sv.VerticalOffset == 0.0)
                    {
                        IsPullRefresh = true;
                        await Task.Delay(2000);
                        for (int i = 0; i < 5; i++)
                        {
                            Items.Insert(0, i);
                        }
                        sv.ChangeView(null, 30, null);
                    }
                    IsPullRefresh = false;
                }
            }
        }

      打完收工,是不是觉得挺简单的?UWP开发即是如此,困难确实有,经验的确没有。跟相对成熟的iOSAndroid开发相比,是需要更多的汗水和努力。但是微软是否要倒了?微软技术又是否没前途?Windows 10是否废品?有空在网上搜这种没有卵用的东西,不如多多学习。

      继续打广告,这种ScrollViewer嵌套ListView的方式呢,确实可以解决问题。但偶尔也会发现和ListView控件自身的ScrollViewer滑动冲突,以及不能精确定位ListViewItem等问题。那么如果想要更加精进的话?记得看俺下一篇哦,随手点个赞吧……嘿嘿嘿……

    Microsoft/Windows-universal-samples

  • 相关阅读:
    《AngularJS》5个实例详解Directive(指令)机制
    angularjs入门学习【指令篇】
    --@angularJS--综合小实例1
    --@angularJS--angular与BootStrap3的应用
    --@angularJS--ng-show应用
    --@angularJS--浅谈class与Ng-Class的应用
    --@angularJS--路由插件UI-Router
    --@angularJS--路由、模块、依赖注入
    Bootstrap兼容IE8
    ANGULAR JS PROMISE使用
  • 原文地址:https://www.cnblogs.com/manupstairs/p/5184386.html
Copyright © 2011-2022 走看看