隐藏离子滚动条上的ion-nav-bar
[英]Hide ion-nav-bar on scroll in ionic
问题描述
I am having tabs template in ionic.Need to hide top navigation bar on scrolling the content of tab.Like whatsapp does. 
我在ionic中有选项卡模板。需要在滚动选项卡的内容时隐藏顶部导航栏。 What changes needed in my template. 我的模板需要进行哪些更改。
<!--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>
2 个解决方案
解决方案1
0 已采纳 2016-04-22 12:52:00
This is how you can do it in custom situations. 这是在自定义情况下可以执行的操作。
<ion-content on-scroll="scrollEvent()" delegate-handle="scrollHandle">
Set the on-scroll event to the ionic-content and then in your controller. 将滚动事件设置为离子含量，然后在控制器中。
$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;
});
}
};
IF YOU HAVE SIMPLE NAV BAR AND CAN HIDE IT ALL TOGETHER JUST USE "$ionicNavBarDelegate.showBar(false);" 如果您拥有简单的导航栏并且可以将其全部隐藏在一起，只需使用“ $ ionicNavBarDelegate.showBar（false）;” instead of $scope.hideNavgiation and all related things to that variable. 而不是$ scope.hideNavgiation以及该变量的所有相关内容。 Example: 例：
$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);
}
}
The $scope.scrollamount is just a pixel value of when to hide the navbar, in this case when user has scrolled 180px from the top. $ scope.scrollamount只是隐藏导航栏的时间的像素值，在这种情况下，当用户从顶部滚动180px时。 But after this you only need to add ng-if="!hideNavigation" or ng-show="!hideNavigation". 但是之后，您只需要添加ng-if =“！hideNavigation”或ng-show =“！hideNavigation”。
You can also set $scope.scrollamount to zero/null when scope is destroyed or ionicview.leave etc. 当范围被破坏或ionicview.leave等时，您也可以将$ scope.scrollamount设置为零/空。
If your navbar is not in the same template and/or controller as your template then you can just 如果导航栏与模板不在同一模板和/或控制器中，则可以
$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 });
});
}
};
And catch it in your other controller 并在其他控制器中捕获它
$scope.$on('showHideNavigation', function(event, args) {
$scope.hideNavigation = args.hide;
});
Hopefully this helps you. 希望这对您有帮助。
解决方案2
0 2017-04-29 22:19:53
Just wanted to contribute for Ionic 2 users with something I've made. 我只是想为Ionic 2用户做出自己的贡献。
You just need to add it to your project. 您只需要将其添加到您的项目中即可。 You can customize HeaderScroller component after that: 之后，您可以自定义HeaderScroller组件：
header-scroller.ts : 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`;
}
});
}
}
In your page.ts : 在您的page.ts中 ：
import { HeaderScroller } from 'path/to/header-scroller';
Depending on your Ionic version (beta or stable), you must add: 根据您的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
]
})
And in your page.html 并在您的page.html中
<ion-content header-scroller>
Hope it helps! 希望能帮助到你！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.