原文:

 

好久没写博客了，因为忙着工作。昨天周末填坑需要做一个上滑列表数据时隐藏导航栏下滑时显示的效果，下面分享一下我的做法，希望能给你带来帮助。

 

思路是通过判断滚动条是往下还是往上滑然后做出相应的显示隐藏导航栏处理即可；

首先在我们的内容外套一个ScrollViewer，然后在ScrollViewer的事件ViewChanged中做判断。

我们新 建一个page，布局出列表（包含模拟测试用的数据）、导航栏，代码如下：

1   
      
         2         
       
          3             
          4             
        
           5                 
         
            6                     
          
             7                         
           
             8 
            
              9 
              10 
             11 
             12 
             13 
            14                     
           15                     
           16                 
          17                 
         
           18                     
          
            19                         
           
             20 
            
              21 
              22 
             23 
             24 
             25 
            26                     
           27                     
           28                 
          29                 
         
           30                     
          
            31                         
           
             32 
            
              33 
              34 
             35 
             36 
             37 
            38                     
           39                     
           40                 
          41                 
         
           42                     
          
            43                         
           
             44 
            
              45 
              46 
             47 
             48 
             49 
            50                     
           51                     
           52                 
          53                 
         
           54                     
          
            55                         
           
             56 
            
              57 
              58 
             59 
             60 
             61 
            62                     
           63                     
           64                 
          65                 
         
           66                     
          
            67                         
           
             68 
            
              69 
              70 
             71 
             72 
             73 
            74                     
           75                     
           76                 
          77                 
         
           78                     
          
            79                         
           
             80 
            
              81 
              82 
             83 
             84 
             85 
            86                     
           87                     
           88                 
          89                 
         
           90                     
          
            91                         
           
             92 
            
              93 
              94 
             95 
             96 
             97 
            98                     
           99                     
          100                 
         101                 
         
          102                     
          
           103                         
           
            104 
            
             105 
             106 
            107 
            108 
            109 
           110                     
          111                     
          112                 
         113                 
         
          114                     
          
           115                         
           
            116 
            
             117 
             118 
            119 
            120 
            121 
           122                     
          123                     
          124                 
         125                 
         
          126                     
          
           127                         
           
            128 
            
             129 
             130 
            131 
            132 
            133 
           134                     
          135                     
          136                 
         137                 
         
          138                     
          
           139                         
           
            140 
            
             141 
             142 
            143 
            144 
            145 
           146                     
          147                     
          148                 
         149                 
         
          150                     
          
           151                         
           
            152 
            
             153 
             154 
            155 
            156 
            157 
           158                     
          159                     
          160                 
         161             
        162         
       163 164 165 166         
       167         
       
        168             
        169         
       170     
      

以上代码的效果是这样的：

然后转到mainpage的后台，代码如下：

1  //滚动条位置变量 2         double scrlocation = 0; 3         //导航栏当前显示状态（这个是为了减少不必要的开销，因为我做的是动画隐藏显示效果如果不用一个变量来记录当前导航栏状态的会重复执行隐藏或显示） 4         bool isshowbmbar = true; 5         public MainPage() 6         { 7             this.InitializeComponent(); 8              9         }10 11         private void sv_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)12         {13             if (sv.VerticalOffset != scrlocation)14             {15                 if (sv.VerticalOffset > scrlocation)16                 {17                     //滚动条当前位置大于存储的变量值时代表往下滑，隐藏底部栏18                     //隐藏19                     if (isshowbmbar)20                     {21                         //这里为了简洁易懂就不做动画隐藏效果，直接用透明度进行隐藏。22                         bar.Opacity = 0;23                         isshowbmbar = false;24                         25                     }26                 }27                 else28                 {29                     //显示30                     if (isshowbmbar == false)31                     {32                         bar.Opacity = 1;33                         isshowbmbar = true;34                        35                     }36 37                 }38 39             }40             scrlocation = sv.VerticalOffset;41         }

代码中也写了非常详细的注释了，这里在简单说几句，我用一个变量scrlocation来记录滚动停止后的滚动条所在位置，然后在列表滚动时也就是viewchanged事件发生时获取滚动条的位置，只要判断viewchanged事件发生时获取滚动条的位置是大于scrlocation还是小于就可以知道用户是往上滑还是往下滑了。这里还有一个变量isshowbmbar是记录当前导航栏的显示状态，因为滑动列表的时候viewchanged事件会不停地触发，如果不用这个变量记录并且判断的话会导致导航栏不停地显示或隐藏，如果你只是单纯用透明度来隐藏或显示的话性能影响上来说不算太大，但是如果你像我用动画来做隐藏显示效果的话会加大这个开销或者出现动画显示不正常的情况。

以上代码运行起来的效果如下（没有动画效果看起来不是很好看，懒得写懒啊大家自己加上就和我第一张效果图一样了。）：

希望我的思路能给你带来帮助，谢谢。如果写得不好见谅。

我把这个demo传上来，大家可以自己运行。（in vs2017rc .net4.6）