在 ionic 中滚动时隐藏 ion-nav-bar答案

【问题标题】：Hide ion-nav-bar on scroll in ionic在 ionic 中滚动时隐藏 ion-nav-bar
【发布时间】：2016-04-22 07:01:53
【问题描述】：

我在 ionic 中有标签模板。滚动标签内容时需要隐藏顶部导航栏。就像 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>

【问题讨论】：

ionicframework.com/docs/api/service/$ionicNavBarDelegate;在滚动监听器中触发 $ionicNavBarDelegate.showBar(false)。

标签： javascript android angularjs ionic-framework

【解决方案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 只是隐藏导航栏的像素值，在这种情况下，当用户从顶部滚动 180 像素时。但在此之后，您只需要添加 ng-if="!hideNavigation" 或 ng-show="!hideNavigation"。

您还可以在作用域被销毁或 ionicview.leave 等时将 $scope.scrollamount 设置为零/null。

如果您的导航栏与您的模板不在同一个模板和/或控制器中，那么您可以

$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;
});

希望这对您有所帮助。

【讨论】：

【解决方案2】：

只是想为 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`;
            }
        });
    }
}

在您的 page.ts 中：

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
    ]
})

在你的 page.html

<ion-content header-scroller>

希望对你有帮助！

【讨论】：

把它也放到 entryComponents 中，会导致错误。此外，它仅在滚动到顶部时才起作用，而不是在向上滚动时起作用。
@alex351 它适用于我的 Ionic 测试版（2.0.0-beta.11）。它在我的应用程序中实现play.google.com/store/apps/… 你有什么版本的 Ionic？
我有 beta.1。无论如何，我选择了另一种方法，因为您的代码仅在滚动到顶部时才显示标题，而不是在向上滚动时立即显示。此外，我必须选择“this._el.children[1]”。
没错。如果您找到了其他解决方案或者您能够改进此代码，请也告诉我们。谢谢
嗨，我没有得到输出