ionic 2 - 항목 슬라이더 - 함수를 트리거하는 슬라이드

Question

3 개의 버튼이있는 이온 항목 슬라이딩 명령이 있습니다. 2 (A 및 B) 왼쪽으로 슬라이드하면 나타나고 오른쪽에 1 (C 버튼)이 나타납니다.

정말 맨 오른쪽으로 항목을 끌 때 버튼 C의 함수가 트리거되는 동작을 구현하고 싶습니다. ionic2 싸이트 (www.staruml.com)에

워드 프로세서

<ion-item-sliding *ngFor="let item of items "(ionDrag)="ondrag($event, item)"></ion-item-sliding> 

내가 너무 멀리 슬쩍 때, 그것은 전화 푸시 것이라는 동작을 받고 한에 그것을 사용하는 예를

ondrag(event, item) { 
    let percent = event.getSlidingPercent(); 
    if (percent > 0) { 
    // positive 
    console.log('right side'); 
    } else { 
    // negative 
    console.log('left side'); 
    } 
    if (Math.abs(percent) > 1) { 
     this.navCtrl.push(NextPage,{param:item},{ animate: true, direction: 'forward' }) 
    } 
} 

로이 코드를 제공 페이지를 여러 번 (내가 생각하는 것처럼 많은 이벤트를 던지고있어)

올바르게 구현하는 방법에 대한 제안 사항이 있습니까?

감사합니다.

Answer 1

push() 메서드가 한 번만 실행되도록 플래그를 추가 할 수 있습니다.

import { Component } from "@angular/core"; 
import { NavController } from 'ionic-angular/index'; 
import { Page1 } from 'page1.ts'; 

@Component({ 
    templateUrl:"home.html" 
}) 
export class HomePage { 

    private alreadyPushed: boolean; 

    private items: Array<any>; 

    private selectedItem: any; 

    constructor(private navCtrl: NavController) { 
    this.items = [ 
     'City of Amsterdam', 
     'City of Bogota', 
     'City of Buenos Aires', 
     'City of Dhaka' 
    ]; 
    } 

    ionViewDidEnter() { 
    // Initialize the flag 
    this.alreadyPushed = false; 

    if(this.selectedItem) { 
     // Reset the selected item 
     this.selectedItem._setOpenAmount(0); 
    } 

    } 

    ondrag(event, item) { 
    let percent = event.getSlidingPercent(); 
    if (percent > 1 && !this.alreadyPushed) { 

     // Store the event to reset it later 
     this.selectedItem = event; 

     // Set the flag to true 
     this.alreadyPushed = true; 

     // Push the new page 
     this.navCtrl.push(Page1, { param : item }); 
    } 
    } 
} 

또한 오른쪽으로 슬라이딩 할 때 당신이 그렇게 만 페이지를 밀어 percent > 1 대신 Math.abs(percent) > 1의를 사용해야 통지하시기 바랍니다.