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

这只是侦听您的ion-item-sliding元素的classList。当班级可用时，幻灯片将打开（或至少部分打开），而当班级不可用时，幻灯片将关闭。

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

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

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

有没有办法找出拖动后“离子项目滑动”是否回到空闲位置？

1 个答案: