이온 2 : 아래에서 슬라이딩 메뉴를 만드는 방법

Question

글쎄, 정확히 슬라이딩 메뉴로 간주 될지 모르겠습니다. 그것은 네비게이션을위한 것이 아니라 데이터를 저장할 것입니다. 내 영감을 애플지도에서 온 : 필요한 첫 번째에 표시되는 내용을 스크롤 할 수 있도록로

그래서 내가 위아래로 밀어 수 있도록하려면 그림. 또한지도를 사용하여 빛/흐림 효과를 확산시키는 방법이 있습니까?

Answer 1

조쉬 모리 (Josh Morony)의 멋진 게시물이 있습니다. here과 매우 유사한 내용입니다.

Here는 소스 코드와 사용 방법을 찾을 수 있습니다 다음은 결과입니다. 가장 관련 부분은 다음과 같습니다

구성 요소 코드 :

import { Component, Input, ElementRef, Renderer } from '@angular/core'; 
import { Platform, DomController } from 'ionic-angular'; 

@Component({ 
    selector: 'content-drawer', 
    templateUrl: 'content-drawer.html' 
}) 
export class ContentDrawer { 

    @Input('options') options: any; 

    handleHeight: number = 50; 
    bounceBack: boolean = true; 
    thresholdTop: number = 200; 
    thresholdBottom: number = 200; 

    constructor(public element: ElementRef, public renderer: Renderer, public domCtrl: DomController, public platform: Platform) { 

    } 

    ngAfterViewInit() { 

    if(this.options.handleHeight){ 
     this.handleHeight = this.options.handleHeight; 
    } 

    if(this.options.bounceBack){ 
     this.bounceBack = this.options.bounceBack; 
    } 

    if(this.options.thresholdFromBottom){ 
     this.thresholdBottom = this.options.thresholdFromBottom; 
    } 

    if(this.options.thresholdFromTop){ 
     this.thresholdTop = this.options.thresholdFromTop; 
    } 

    this.renderer.setElementStyle(this.element.nativeElement, 'top', this.platform.height() - this.handleHeight + 'px'); 
    this.renderer.setElementStyle(this.element.nativeElement, 'padding-top', this.handleHeight + 'px'); 

    let hammer = new window['Hammer'](this.element.nativeElement); 
    hammer.get('pan').set({ direction: window['Hammer'].DIRECTION_VERTICAL }); 

    hammer.on('pan', (ev) => { 
     this.handlePan(ev); 
    }); 

    } 

    handlePan(ev){ 

    let newTop = ev.center.y; 

    let bounceToBottom = false; 
    let bounceToTop = false; 

    if(this.bounceBack && ev.isFinal){ 

     let topDiff = newTop - this.thresholdTop; 
     let bottomDiff = (this.platform.height() - this.thresholdBottom) - newTop;  

     topDiff >= bottomDiff ? bounceToBottom = true : bounceToTop = true; 

    } 

    if((newTop < this.thresholdTop && ev.additionalEvent === "panup") || bounceToTop){ 

     this.domCtrl.write(() => { 
     this.renderer.setElementStyle(this.element.nativeElement, 'transition', 'top 0.5s'); 
     this.renderer.setElementStyle(this.element.nativeElement, 'top', '0px'); 
     }); 

    } else if(((this.platform.height() - newTop) < this.thresholdBottom && ev.additionalEvent === "pandown") || bounceToBottom){ 

     this.domCtrl.write(() => { 
     this.renderer.setElementStyle(this.element.nativeElement, 'transition', 'top 0.5s'); 
     this.renderer.setElementStyle(this.element.nativeElement, 'top', this.platform.height() - this.handleHeight + 'px'); 
     }); 

    } else { 

     this.renderer.setElementStyle(this.element.nativeElement, 'transition', 'none'); 

     if(newTop > 0 && newTop < (this.platform.height() - this.handleHeight)) { 

     if(ev.additionalEvent === "panup" || ev.additionalEvent === "pandown"){ 

      this.domCtrl.write(() => { 
      this.renderer.setElementStyle(this.element.nativeElement, 'top', newTop + 'px'); 
      }); 

     } 

     } 

    } 

    } 

} 

보기 :

<ion-content> 
    <ng-content></ng-content> 
</ion-content> 

스타일 :

.ios, .md { 

    content-drawer { 

     width: 100%; 
     height: 100%; 
     position: absolute; 
     z-index: 10 !important; 
     box-shadow: 0px -4px 22px -8px rgba(0,0,0,0.75); 

    } 

} 

---

는이 같은 페이지에서 사용

:

홈페이지 :

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    drawerOptions: any; 

    constructor(public navCtrl: NavController) { 

     this.drawerOptions = { 
      handleHeight: 50, 
      thresholdFromBottom: 200, 
      thresholdFromTop: 200, 
      bounceBack: true 
     }; 

    } 

} 

보기 :

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     Ionic Blank 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    The world is your oyster. 
    <p> 
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide. 
    </p> 
</ion-content> 

<content-drawer [options]="drawerOptions"> 
    <div class="content"> 
     The world is your oyster. 
     <p> 
     If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide. 
     </p> 
    </div> 
</content-drawer> 

스타일 :

.ios, .md { 

    page-home { 

     content-drawer { 
      background-color: #34495e !important; 
     } 

     content-drawer .content { 
      padding: 20px; 
     } 

    } 

}