是否有一种方法可以找到在拖动后“离子项目滑动”是否回到了空闲位置？

Question

我想将离子项目滑动元素集成到我的应用程序中。

该项目是透明的，所以问题是我可以同时看到左右离子项目选项。看起来不太好。

当我向右滑动时->右侧的“ ion-item-option”应该不可见。反之亦然。

要获得拖动位置，我在离子项目滑动上使用（ionDrag）方法。在文档中，它说（ionDrag）在滑动位置更改时发出，但仅在我主动拖动该项目时才触发。

我放开该物品并使其返回到应该为0的空闲位置后，（ionDrag）就会停止发出该位置。这样我就可以确定拖动后位置是否为0。有没有办法解决这个问题？

这是我的HTML：

<ion-item-sliding id="item_{{i}}" (ionDrag)="onDrag($event)">
   <ion-item-options side="start">
       <ion-item-option expandable>Gekauft</ion-item-option>
    </ion-item-options>

    <ion-item button (click)="openAmountItem(i)">
       <ion-avatar slot="start">
          <ion-img src="{{product.img}}"></ion-img>
        </ion-avatar>
        <ion-label>
           <h2>{{product.name}}</h2>
           <p class="amount-label">
             {{product.amount}}
           </p>
         </ion-label>
         <ion-label slot="end" color="light">{{product.price| number : '1.2-2'}}€ </ion-label>   
      </ion-item>

      <ion-item-options side="end" (ionSwipe)="itemSwipe($event)">
         <ion-item-option expandable color="danger">Löschen</ion-item-option>
      </ion-item-options>
   </ion-item-sliding>

HTML Code

这是TS方法：

onDrag(event) {
event.target.getSlidingRatio().then(res=> {
  if(res > 0){
    console.log("DELTE");
    this.showArchiveSlide = false;
    this.showDeleteSlide = true;
  }
  if(res == 0){
    console.log("IDLE");
    this.showArchiveSlide = true;
    this.showDeleteSlide = true;
  }
  if(res < 0){
    console.log("SAVE");
    this.showArchiveSlide = true;
    this.showDeleteSlide = false;
  }
  this.slideWidth = res;
  console.log(res);
});

}

TS

这是输出：Console.log()

一旦我松开滑动的项目，（ionDrag）就会停止发出该位置。

非常感谢您的帮助。

Answer 1

老歌，但没人帮忙...

小提示：在事件中您不需要承诺，有一个包含参数的详细参数... event.detail：{amount：1，ratio：0.45}

回答真正的问题：我正在寻找相同的东西，而且似乎没有黑客就不可能。我正在Ionic5中工作，但这也至少适用于Ionic 4。

@ViewChild('yourList') yourList: IonItemSliding;
...
ngAfterViewinit(){
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if(mutation.target.classList.contains('item-sliding-active-slide')){
                // do when active
                return;
            }
            //do when close
        });
    });

    observer.observe(this.yourList.el,{attributes: true});
}

这只是侦听您的离子项目滑动元素的classList。当课程可用时，幻灯片将打开（或至少部分打开），而在课程不可用时，幻灯片将关闭。

如果您需要知道哪一个是打开的，也可以收听“ item-sliding-active-options-end”和“ item-sliding-active-options-start”。

然而，封闭部分似乎有一点延迟。要检测它是否真正关闭，您可以添加一个MutationObserver，它观察每个离子项目上的style.transform。如果为空，则关闭滑块。

[另外：当您的想法警告您有关classList，style.transform或this.yourList.el时，也不要惊慌。全部可用。前两个表示给定的定义未定义此类属性，而后者仅表示打字稿具有私有修饰符。由于无论如何都将其转换为原始javascript，因此它可以工作，因为javascript没有私有修饰符，并且目标只是HTMLElements。