2017-08-08 93 views
1

我嘗試做一個輕掃手勢來切換標籤。我希望手勢能夠在整個屏幕上運行。我趕上離子輕掃手勢不適用於手機

<ion-content (swipe)="swipeEvent($event)"> 

輕掃運動而swipeEvent funtion是

swipeEvent(e) { 
    if(e.direction == '2'){ 
    this.navCtrl.parent.select(2); 
    } 
    else if(e.direction == '4'){ 
    this.navCtrl.parent.select(0); 
    } 
} 

它工作正常,在瀏覽器中。但是當我用手機構建手勢時,手勢沒有任何影響。 有沒有其他解決方案?

回答

1

通過加入用100%的高度和寬度一個div只是解決它。

<ion-content padding> 
    <div (swipe)="swipeEvent($event)" style="position: absolute;top:0;left:0;height:100%;width:100%;"> 
    <ion-item> 

    </ion-item> 
    </div> 
</ion-content> 
+0

有沒有什麼區別**我和你的一個在這裏建議的解決方案。你也在這裏做了同樣的事情。你從'ion-content'中移除了'(swipe)'並且把它放到''div '沒有區別。 – Sampath

2

這是Ionic團隊成員解決方案:See this too

不推薦在主要內容上使用滑動手勢。 由於離子內容是手勢的輸入(滾動等),它在其上滑動只會造成混淆。相反,將 事件處理程序放在子元素上可以正常工作。

<ion-content padding> 
    <ion-card (swipe)="swipeEvent($event)"> 
    <ion-item> 

    </ion-item> 
    </ion-card> 
</ion-content> 
+1

但我需要在整個屏幕上的手勢。 – tontus

+1

這是由design.Sorry,你不能。 – Sampath

+0

嘗試像這樣。希望這會捕獲左側滑動事件。' – Sampath