2017-02-20 4 views
5

iOS2에서 Ionic2 결승 태핑 동작에 문제가 있습니다.Ionic2 iOS 전환 차단 탭 누르기 또는 초 동안 클릭

페이지 전환 후 1-2 초 동안 탭이나 클릭이 작동하지 않으므로 사용자는 두 번 탭하거나 두 번 클릭해야합니다 (또는 클릭하기 전에 잠시 기다려야 함). 이미 카드에 직접 클릭을 연결하는 대신 카드 내부에 <a>을 사용하려고했습니다. 나는 또한 (click), (tap), [navpush]을 시도하고 나는 카드에 tappable을 추가하려고 시도했다.

<ion-content padding class="modules card-background-page"> 
    <ion-card class="module-card" *ngFor="let module of modules"> 
    <a (tap)="tapEvent($event)" (click)="clickEvent($event)" [navPush]="modulePage" [navParams]="{id: module.id}" > 
    <img src="{{module.thumbnail}}"/> 
    <div class="card-content"> 
     <div class="card-title"> 
      <strong>Module {{module.number}}</strong> 
     </div> 
     <div class="card-subtitle"> 
      <strong *ngIf="translate.currentLang!='fr'">{{module.subtitle_en}}</strong> 
      <strong *ngIf="translate.currentLang=='fr'">{{module.subtitle_fr}}</strong> 
     </div> 
    </div> 
    </a> 
    </ion-card> 
</ion-content> 

Android에서는 잘 작동합니다. 많은 시행 착오 후

나는 안드로이드 전환을 사용하여이 문제를 "해결"
IonicModule.forRoot(MyApp, { 
     pageTransition: 'md-transition' 
    }), 

그래서 문제가 아이폰 OS 전환 될 것으로 보인다. 어떤 생각을 어떻게 실제로 고칠 수 있을까요? 같은 문제가있는 사람 있습니까? 전환 후 아주 짧게 또는 사이드 메뉴를 닫음으로써 팁에 문제가 있습니다. 이것들은 그렇게 쉽게 복제 할 수 없습니다.

아이폰 6S

+0

에 끌어 오기 요청을 제출? 그것은 이온 기고자가이 근본적인 문제를 고치지 않는 것처럼 보입니다. 그리고 그들은 그것을 고칠 계획이 없습니다 : ( –

+1

@ KamilKiełczewski 확실하지는 않습니다. 현재 버전을 테스트해야합니다.해결되지 않으면 해결 방법을 사용하십시오 :'(클릭)'대신'(탭)'을 사용하고 항상'tappable' (적어도 ''또는 '

답변

2

문제에 아이폰 OS 10.1.1 전환에 사용되는 실제 애니메이션이 될 것으로 보인다. navCtrl을 밀 때 애니메이션의 타이밍 (및 여유)을 조정하여이 문제를 해결할 수 있습니다. 선택적인 옵션 객체를 마지막 매개 변수로 제공하여이 작업을 수행 할 수 있습니다.

this.navCtrl.push('MyPage', null, { 
    duration: 200, 
    easing: 'cubic-bezier(0.36,0.66,0.9,1)' 
}); 

설명은 다음과 ...

원래 애니메이션 설정이 너무 깁니다 500 밀리 초입니다. 그러나 실제 애니메이션은 원래 애니메이션의 입체 - 베 지어 곡선이 지난 200-300ms에서 매우 평평하기 때문에 실제로 오래 걸리는 것처럼 보이지 않습니다 (아래 그림 참조). enter image description here

그래서 이징을 변경해야하는 이유입니다.

원본 : 입방 베 지어 (0.36,0.66, 0.9, 1)

응용 프로그램을 만들려면 : 입방 베 지어 (0.36,0.66, 0.04, 1)로 변경 다시 탐색 할 때 빠르다.보기에서 뒤로 버튼을 누르면 같은 애니메이션이 추가되어야한다. 이 작업은 NavBar의 뒤로 단추 동작을 재정 의하여 수행 할 수 있습니다.

그래서 사람 소스를 구축 (또는 이온 팀에 풀 요청을 제공하고자하는) 홈페이지를위한 구성 요소

@ViewChild(Navbar) navBar: Navbar; 

ionViewDidLoad() { 
    this.setBackButtonAction() 
} 

//Method that overrides the default back button action 
setBackButtonAction() { 
    this.navBar.backButtonClick =() => { 
    this.navCtrl.pop({ 
     duration: 200, 
     easing: 'cubic-bezier(0.36,0.66,0.9,1)' 
    }); 
    } 
} 

이를 추가 할 수 있습니다. 원래 값은 IOS-transition.ts에서 설정되고있다

const DURATION = 500; 
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; 

편집을 변경해야합니다 : 당신은이 문제에 대한 새로운 정보를 가지고 있습니까 나는 이오니아 팀 https://github.com/ionic-team/ionic/pull/13029

+0

끌어 오기 요청에 대한 링크를 공유 하시겠습니까? – mpiz

+1

물론입니다. 여기 있어요 https://github.com/ionic-team/ionic/pull/13029 –

+0

이렇게하면 페이지 전환이 훨씬 더 원활 해집니다. 잘 했어! 이오닉 팀이 당신의 변화를 반영하길 바랍니다. – mpiz