Angular 离子2-项目滑块-滑动至触发功能

我有3个按钮的离子项目滑动指令。我向左滑动时会出现2个A和B，向右滑动1个按钮C

我想实现这样一种行为：当我真的将项目拖到最右边时，按钮C下的函数被触发

ionic2 hompage上的文档给出了这个代码片段作为示例

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' })
  }
}

使用它

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

我有这样一种行为，当我刷得太远时，它会调用并多次推送页面，我猜这和我扔的事件一样多

有没有关于如何正确实施的建议

---

谢谢

您可以添加一个标志，以确保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 });
    }
  }
}

---

另外，请注意，您应该使用百分比>1而不是Math.abs百分比>1，以便在向右滑动时只推送页面。

您可以添加一个标志，以确保推送方法只执行一次

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

---

另外，请注意，您应该使用百分比>1而不是Math.abs百分比>1，这样您只能在向右滑动时推动页面。

感谢您的回复，一个问题是，当页面弹出时，项目仍保持滑动状态。有没有办法重置位置？我已经更新了答案和，现在它会在返回视图时重置项目：嗨，对不起，忘了确认，是的，非常感谢！我将使用IonViewDidLeave很高兴听到：感谢您的回复，一个问题是，当页面弹出时，项目仍然会滑动。有没有办法重置位置？我已经更新了答案和，现在它会在返回视图时重置项目：嗨，对不起，忘了确认，是的，非常感谢！我很高兴听到这样的消息：