在离子滚动时隐藏离子导航栏

这就是您在自定义情况下可以做到这一点的方法。

<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时。但在此之后，您只需要添加 ng-if="！hideNavigation" 或 ng-show="！hideNavigation"。

您还可以在范围被破坏时将$scope.scrollamount设置为零/空或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;
});

希望这对您有所帮助。

只是想用我制作的东西为 Ionic 2 用户做出贡献。

您只需要将其添加到您的项目中。之后，您可以自定义 HeaderScroller 组件：

header-scroller.ts：

import { Directive, ElementRef } from '@angular/core';
/**
 * Show/Hide header based on page's scroll position.
 */
@Directive({
    selector: '[header-scroller]'
})
export class HeaderScroller {
    /**
     * @var number Distance from page top to trigger the hide/show functionality.
     */
    protected _topTriggeringDistance: number = 100;
    /**
     * @var string Distance to keep between the top and the content when the header is hidden.
     */
    protected _topContentDistance: string = '10px';
    /**
     * @var number Animation transition, in seconds, for showing/hiding the header.
     */
    protected _animationTransition: number = 0.6;
    /**
     * @var HTMLElement Content element (<ion-content>).
     */
    protected _el: any;
    /**
     * Initializes.
     *
     * @param el ElementRef Directive's selector.
     * @return void
     */
    constructor(el: ElementRef) {
        this._el = el.nativeElement;
    }
    /**
     * Binds the scroller.
     *
     * @return void
     */
    ngOnInit() {
        // Set animation transition
        this._el.previousElementSibling.style.transition = `top ${this._animationTransition}s ease-in-out`;
        this._bindScroller(this._el.children[0]);
    }
    /**
     * Listen to scroll events in <scroll-content> component.
     *
     * @param el HTMLElement Scroller element (<scroll-content>).
     * @return void
     */
    protected _bindScroller(el): void {
        el.addEventListener('scroll', event => {
            let scroller = event.target,
                header = event.target.parentElement.previousElementSibling;
            if (event.target.scrollTop > this._topTriggeringDistance && header.style.top != '0') {
                scroller.style.marginTop = this._topContentDistance;
                header.style.top = `-${header.offsetHeight}px`;
            } else if (event.target.scrollTop <= this._topTriggeringDistance && header.style.top == `-${header.offsetHeight}px`) {
                header.style.top = '0';
                scroller.style.marginTop = `${header.offsetHeight}px`;
            }
        });
    }
}

在您的页面中：

import { HeaderScroller } from 'path/to/header-scroller';

根据您的 Ionic 版本（测试版或稳定版），您必须添加：

// Ionic 2 beta (page.ts)
@Component({
    directives: [ HeaderScroller ]
})
// Ionic 2 new (app.module.ts) -untested, but it should work-
@NgModule({
    declarations: [
        HeaderScroller
    ],
    entryComponents: [
        HeaderScroller
    ]
})

在您的页面中.html

<ion-content header-scroller>

希望对您有所帮助！