ionicのスクロールでion-nav-barを非表示にする

私はionic.Needのtabテンプレートを持っています.tapsの内容をスクロールする上のナビゲーションバーを隠す必要があります。whatsappのように。テンプレートに必要な変更ionicのスクロールでion-nav-barを非表示にする

<!--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>

出典

2016-04-22 Azhar Khan

http://ionicframework.com/docs/api/service/$ionicNavBarDelegate/;スクロールリスナー内で$ ionicNavBarDelegate.showBar（false）をトリガーします。 –

これは、カスタム状況で行う方法です。

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

on-scrollイベントをionic-contentに設定してからコントローラに設定します。 YOUは、SIMPLE NAVのBARがあり、すべて一緒にそれを隠すことができるかどう

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

JUST "（偽）$ ionicNavBarDelegate.showBarを;" を使用$ 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"を追加するだけです。

範囲が破壊されたときにもゼロ/ nullに$の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; 
});

でそれをキャッチがうまくいけば、これはあなたを助けます。

出典

2016-04-22 12:52:00 thepio

Ionic 2のユーザーに私が作ったことを使って投稿しました。

プロジェクトに追加するだけで済みます。あなたはその後HeaderScrollerコンポーネントをカスタマイズすることができます。

ヘッダ-scroller.ts：あなたのpage.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 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>

はそれが役に立てば幸い！

出典

2017-04-29 22:19:53

これをentryComponentsに配置すると、エラーが発生します。また、上にスクロールする場合にのみ機能し、上にスクロールする場合には機能しません。 – alex351

@ alex351これは、私のベータ版のIonic（2.0.0-beta.11）で動作します。私のアプリhttps://play.google.com/store/apps/details?id=com.besmartmobileに実装されています。mundosocialどんなバージョンのIonicをお持ちですか？ –

私はbeta.1を持っています。とにかく、別の方法を選択しました。なぜなら、あなたのコードは、スクロールするときだけ、上にスクロールするときだけ、ヘッダーを表示するからです。さらに、私は "this._el.children [1]"を選択しなければなりませんでした。 – alex351

ionicのスクロールでion-nav-barを非表示にする

答えて

関連する問題