[Ionic] 스크롤 이벤트에서 하위 헤더를 내보내거나 끄는 방법
키워드
이미지
Ionic Info
cli packages: (/Users/xxxxxxx/.nodebrew/node/v8.1.2/lib/node_modules)
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
local packages:
@ionic/app-scripts : 3.0.0
Ionic Framework : ionic-angular 3.7.1
System:
Node : v8.1.2
npm : 5.1.0
OS : macOS Sierra
Misc:
backend : legacy
How To
html 파일 준비
<ion-header>
<ion-navbar color="primary">
<ion-title>
シフトカー
</ion-title>
</ion-navbar>
<!-- このパーツが出たり消えたりする -->
<ion-toolbar *ngIf="showSubHeader">
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<!---------------------------->
</ion-header>
<!-- スクロールの開始と終了のイベントを拾う -->
<ion-content padding (ionScrollStart)="onScrollEvent($event)" (ionScrollEnd)="onScrollEvent($event)" >
<ion-list>
<ion-item *ngFor="let name of list;">
{{name}}
</ion-item>
</ion-list>
</ion-content>
표시 숨겨진 플래그 준비
ViewChild 데코레이터로 Content 얻기
@ViewChild(Content) content: Content;
showSubHeader: boolean;
스크롤 이벤트에서 발화되는 처리 준비
onScrollEvent(event: ScrollEvent) {
switch (event.directionY) {
case 'up':
this.zone.run(() => {
this.showSubHeader = true;
this.content.resize();
});
break;
case 'down':
this.zone.run(() => {
this.showSubHeader = false;
this.content.resize();
});
break;
default:
}
}
ionScrollStart와 ionScrollEnd 이벤트를 데리러
onScroll 메소드가 실행된다.
하지만
데모(GitHub Pages)
감상
더 좋은 방법이 있다고 생각하고,
스크롤로 보이는 숨기기보다는 버튼으로 명시적으로 표시/숨기기를 제어해도 좋은 생각이 든다.
Reference
이 문제에 관하여([Ionic] 스크롤 이벤트에서 하위 헤더를 내보내거나 끄는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yosshitaku067/items/72878dbaa137311dfdf1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
cli packages: (/Users/xxxxxxx/.nodebrew/node/v8.1.2/lib/node_modules)
@ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
local packages:
@ionic/app-scripts : 3.0.0
Ionic Framework : ionic-angular 3.7.1
System:
Node : v8.1.2
npm : 5.1.0
OS : macOS Sierra
Misc:
backend : legacy
How To
html 파일 준비
<ion-header>
<ion-navbar color="primary">
<ion-title>
シフトカー
</ion-title>
</ion-navbar>
<!-- このパーツが出たり消えたりする -->
<ion-toolbar *ngIf="showSubHeader">
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<!---------------------------->
</ion-header>
<!-- スクロールの開始と終了のイベントを拾う -->
<ion-content padding (ionScrollStart)="onScrollEvent($event)" (ionScrollEnd)="onScrollEvent($event)" >
<ion-list>
<ion-item *ngFor="let name of list;">
{{name}}
</ion-item>
</ion-list>
</ion-content>
표시 숨겨진 플래그 준비
ViewChild 데코레이터로 Content 얻기
@ViewChild(Content) content: Content;
showSubHeader: boolean;
스크롤 이벤트에서 발화되는 처리 준비
onScrollEvent(event: ScrollEvent) {
switch (event.directionY) {
case 'up':
this.zone.run(() => {
this.showSubHeader = true;
this.content.resize();
});
break;
case 'down':
this.zone.run(() => {
this.showSubHeader = false;
this.content.resize();
});
break;
default:
}
}
ionScrollStart와 ionScrollEnd 이벤트를 데리러
onScroll 메소드가 실행된다.
하지만
데모(GitHub Pages)
감상
더 좋은 방법이 있다고 생각하고,
스크롤로 보이는 숨기기보다는 버튼으로 명시적으로 표시/숨기기를 제어해도 좋은 생각이 든다.
Reference
이 문제에 관하여([Ionic] 스크롤 이벤트에서 하위 헤더를 내보내거나 끄는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yosshitaku067/items/72878dbaa137311dfdf1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<ion-header>
<ion-navbar color="primary">
<ion-title>
シフトカー
</ion-title>
</ion-navbar>
<!-- このパーツが出たり消えたりする -->
<ion-toolbar *ngIf="showSubHeader">
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<!---------------------------->
</ion-header>
<!-- スクロールの開始と終了のイベントを拾う -->
<ion-content padding (ionScrollStart)="onScrollEvent($event)" (ionScrollEnd)="onScrollEvent($event)" >
<ion-list>
<ion-item *ngFor="let name of list;">
{{name}}
</ion-item>
</ion-list>
</ion-content>
@ViewChild(Content) content: Content;
showSubHeader: boolean;
onScrollEvent(event: ScrollEvent) {
switch (event.directionY) {
case 'up':
this.zone.run(() => {
this.showSubHeader = true;
this.content.resize();
});
break;
case 'down':
this.zone.run(() => {
this.showSubHeader = false;
this.content.resize();
});
break;
default:
}
}
Reference
이 문제에 관하여([Ionic] 스크롤 이벤트에서 하위 헤더를 내보내거나 끄는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yosshitaku067/items/72878dbaa137311dfdf1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)