1

3 つのボタンを持つ ionic-item-sliding ディレクティブがあります。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>

スワイプしすぎると、ページが複数回呼び出されてプッシュされるという動作が得られます（スローしているイベントと同じ数だと思います）

これを正しく実装する方法について何か提案はありますか?

ありがとう！

4

1 に答える 1

5

push()メソッドが 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 });
    }
  }
}

また、右にスライドするときにページを押すだけなので、percent > 1代わりに使用する必要があることに注意してください。Math.abs(percent) > 1

于 2016-08-29T04:48:17.480 に答える