Question

我试图使用（ionDrag）指令增加或减少金额，所以我创建了一个看起来像这样的视图：

<ion-item-sliding (ionDrag)="handleSlide($event, tour)">
  <ion-item>
    Drag to add or remove
  </ion-item>
  <ion-item-options side="start">
    <ion-item-option><ion-icon name="remove-circle-outline"></ion-icon></ion-item-option>
  </ion-item-options>

  <ion-item-options side="end">
    <ion-item-option><ion-icon name="add-circle-outline"></ion-icon></ion-item-option>
  </ion-item-options>
</ion-item-sliding>

在控制器中，我编写以下代码：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-places',
  templateUrl: './places.component.html',
  styleUrls: ['./places.component.scss']
})
export class PlacesComponent implements OnInit {
  @Input() tour: any;

  constructor() { }

  ngOnInit() {
  }

  public handleSlide(event: any, tour: any): void {

    const percent: Number = event.getSlidingRatio();

    console.log('Slide ' + event.type + ' : ' + percent);
    if (percent > 0) {
      this.increment();
    } else {
      this.decrement();
    }
  }

  private increment(): any {
    console.log('Up');
  }

  private decrement(): any {
    console.log('Down');
  }
}

但是当我拖动元素时，控制台会返回TypeError e.getSlidingRatio不是一个函数。

我正在使用Ionic 4，并根据更新文档将getSlidingPercent替换为getSlidingRatio。

尝试将事件提示为CustomEvent，但此类型上不存在getSlidingRatio（）...与CustomEvent相同

所以我的问题...这段代码我做错了什么？

Answer 1

ion-item-sliding的getSlidingRatio方法返回一个Promise，因此您不能将其直接分配给变量。

handleSlide(event, tour) {
    event.target.getSlidingRatio().then(res => {
        let ratio = res;
        console.log(ratio);
    });
}

Answer 2

我有一个问题，当在一个beta版本中我根本无法访问它时，但是在最新版本（4.0.0 / 4.0.1）中仍然需要一种解决方法，至少为了我。我的版本是：

"@ionic-native/core": "^5.0.0",
"@ionic/angular": "^4.0.0",

ionic cli: 4.10.2

这样，像您一样传递事件，但是我发现需要进入details的跟随者issue。因此，当console.logging $event时，它的输出包括具有details属性的对象ratio，因此解决了我的问题：

<ion-item-sliding (ionDrag)="handleSlide($event)">
  <!-- ... -->
</ion-item-sliding>

TS：

handleSlide(event: any) {    
  let ratio = event.detail.ratio;
  console.log(ratio);
}

检查您的版本，希望对您有所帮助！

Answer 3

首先：在HTML中，您必须为离子项目滑动项添加别名#sliding

第二个：在TS中，在导出行之后使用ViewChild：

  @ViewChild('sliding', { static: false }) sliding: IonItemSliding;

  // {static: false} make the difference

第三：函数中使用getSlidingRatio()方法

    this.sliding.getSlidingRatio()
   .then( val => {
     console.log({val});
   })
   .catch(err => {
     console.log({err});
   });

离子4滑动项目getSlidingRatio不是函数

3 个答案: