[android]隐藏离子导航栏上滚动在离子

发布时间: 2017/3/17 20:34:32
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有选项卡模板在离子。需要隐藏顶部导航栏上滚动选项卡的内容。像 whatsapp 一样。 什么需要改变我的模板。

<!--This is Index.html-->
<body ng-app="starter">
    <ion-nav-bar class="bar-positive"></ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>
<!--this is template.html-->
<ion-view>
    <ion-content>
        <ion-list>
            <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="x in names" type="item-text-wrap">
                <img ng-src="{{x.displayProfile}}">
                <h2>{{x.firstName}}</h2>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

解决方法 1:

这是你怎么可以自定义的情况。

<ion-content on-scroll="scrollEvent()" delegate-handle="scrollHandle">

对离子含量,然后在您的控制器设置上滚动事件。

$scope.scrollEvent = function() {
  $scope.scrollamount = $ionicScrollDelegate.$getByHandle('scrollHandle').getScrollPosition().top;
  if ($scope.scrollamount > 180) {
    $scope.$apply(function() {
       $scope.hideNavigation = true;
    });
  } else {
    $scope.$apply(function() {
      $scope.hideNavigation = false;
    });
  }
};

如果你有简单的导航栏和可以隐藏它所有在一起只是使用"$ionicNavBarDelegate.showBar(false)"; 相反的 $scope.hideNavgiation 和所有相关的事情给该变量。示例︰

$scope.scrollEvent = function() {
  var scrollamount = $ionicScrollDelegate.$getByHandle('scrollHandle').getScrollPosition().top;
  if (scrollamount > 0) { // Would hide nav-bar immediately when scrolled and show it only when all the way at top. You can fiddle with it to find the best solution for you
    $ionicNavBarDelegate.showBar(false);
  } else {
    $ionicNavBarDelegate.showBar(true);
  }
}

$scope.scrollamount 是只是一个像素值的时候隐藏导航栏,在这种情况下,当用户滚动 180px 从顶部。但在此,你只需要添加吴以后-如果 ="! hideNavigation"或吴秀 ="! hideNavigation"。

您还可以设置 $scope.scrollamount 以零/null 时破坏范围或 ionicview.leave 等。

如果您的导航栏是不相同的模板和/或控制器作为您的模板然后就可以

$scope.scrollEvent = function() {
  $scope.scrollamount = $ionicScrollDelegate.$getByHandle('scrollHandle').getScrollPosition().top;
  if ($scope.scrollamount > 180) {
    $scope.$apply(function() {
      $rootScope.$broadcast('showHideNavigation', { hide: true });
    });
  } else {
    $scope.$apply(function() {
      $rootScope.$broadcast('showHideNavigation', { hide: false });
    });
  }
};

抓住它在其他控制器中

$scope.$on('showHideNavigation', function(event, args) {
  $scope.hideNavigation = args.hide;
});

希望这可以帮助你。

赞助商