Question

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

Answer 1

这是您在自定义情况下的方法。

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

将滚动前事件设置为离子内容，然后设置在控制器中。

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

如果您拥有简单的NAV栏并且可以将它们全部隐藏起来，只需使用“$ ionicNavBarDelegate.showBar（false）;”而不是$ scope.hideNavgiation和该变量的所有相关内容。例如：

$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.scrollamount只是隐藏导航栏的时间像素值，在这种情况下，当用户从顶部滚动180px时。但在此之后你只需要添加ng-if =“！hideNavigation”或ng-show =“！hideNavigation”。

当范围被破坏或者为ionicview.leave等时，你也可以将$ scope.scrollamount设置为零/ null。

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

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

并在你的其他控制器中捕获它

08:00

希望这可以帮到你。

Answer 2

只是想为 Ionic 2 用户做出贡献。

您只需将其添加到项目中即可。您可以在此之后自定义HeaderScroller组件：

标题-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>

希望它有所帮助！

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

2 个答案: