Ionic 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; 
     } 

    } 

}