ionic list上拉全屏显示，下拉恢复

马上要给伟大的祖国母亲庆生了，也没有什么心情工作了，O(∩_∩)O哈哈~ 简单整理下这两天研究的东西，小弟学识浅薄，只是实现了效果，不知道还有没有其他的办法。
最近项目需求，简单实现了下ion-list上拉时将页面全屏显示，下拉恢复（也可以在上拉到顶部时恢复）。

因为页面需要在列表处可以进行拖拽，前期做这个项目的时候也是刚刚接触phonegap，就把ion-content放在了对应列表的地方，在上部就用div来显示一些信息。
不方便上源码，这里简单写一下吧,纯手写啊。。。

html:

<div style="width:100%;" ng-class="{true:'detection-info-hide',false:'detection-info-show'}[detection_info_is_show]">
    <!-- 下面的overflow一定要写，再有内层的话也要加这个属性 -->
    <div style="overflow:hidden;">
        <!-- 这里是页面上部显示的内容，显示一些信息 -->
    </div>
</div>
<ion-content style="margin-top:220px;" ng-class="{true:'list-margin-sub',false:'list-margin-add'}[detection_info_is_show]">
    <ion-list ng-repeat="..." on-swipe-up="swipeUp()" on-swipe-down="swipeDown()" on-drag-up="swipeUp()" on-drag-down="swipeDown()">
        <div>
            <!-- 这里是列表项 -->
        </div>
    </ion-list>

</ion-content>

css 命名简单命名的，不要介意:

.detection-info-hide{ -webkit-animation:myfirst 0.5s; animation-fill-mode:forwards; }
    @-webkit-keyframes myfirst /* Safari and Chrome */ {
        from   { height: 137px;}
        to  { height: 0px;}
    }

    .detection-info-show{ -webkit-animation:mysecond 0.5s; animation-fill-mode:forwards; }
    @-webkit-keyframes mysecond /* Safari and Chrome */ {
        from   { height: 0px;}
        to  { height: 137px;}
    }
    .list-margin-sub { -webkit-animation: list-margin-sub-sub 0.5s; animation-fill-mode:forwards; }
    @-webkit-keyframes list-margin-sub-sub {
        from   { margin-top: 220px;}
        to  { margin-top: 83px;}
    }
    .list-margin-add { -webkit-animation: list-margin-add-add 0.5s; animation-fill-mode:forwards; }
    @-webkit-keyframes list-margin-add-add {
        from   { margin-top: 83px;}
        to  { margin-top: 220px;}
    }

js:

$scope.swipeUp = function(){
            if(!$scope.has_excange_above){
                // 判断当前是否有滚动条，没有时上拉不隐藏
                if($ionicScrollDelegate.getScrollView().getScrollMax().top > $ionicScrollDelegate.getScrollPosition().top){
                    // 隐藏
                    $scope.detection_info_is_show = true;
                    $scope.scrollHeight = false;
                    $scope.has_excange_above = true;
                    $scope.has_excange_bottom = false;
                    // 滚动视图重新计算它的容器大小
                    // 时间根据animation的时间定的 
                    $timeout(function(){$ionicScrollDelegate.resize()},550);
                }
            }
        }
        $scope.swipeDown = function(){
            if(!$scope.has_excange_bottom){          
                // 显示
                $scope.detection_info_is_show = false;
                $scope.scrollHeight = true;
                $scope.has_excange_above = false;
                $scope.has_excange_bottom = true;
            }
        }

大概就是上面的代码啦

实现的思路就是捕获angularjs的上拉、下拉、上滑、下滑事件，在这个事件上将咱们的样式添加上。 

实现起来有个问题，当快速上拉时，ion-list 生成的<div class="scroll">会脱离底部，慢慢拉的话没有这个问题。所以就在js里面加了一个resize，用来重新计算大小，别忘了添加$ionicScrollDelegate依赖。
PS:上面这个问题感觉没用太好，不知道是否有高人指点一二。小弟感激不尽。

另外，感觉这个效果不是很好，模仿淘宝的app做的，觉得可以在上拉的时候控制list不滚动，只做全屏操作，当全屏后，再上拉，list再跟着动，但是没有实现，思路是想拦截list的滚动事件，但是看源码好像是设置是否滚动后就不能改变了，再次请高人指点。
告退~准备放假了 祝祖国生日快乐

ionic list上拉全屏显示，下拉恢复

相关文章