离子列表:滑动移除？

Question

有没有可能用“离子列表”来实现“滑动删除”(就像Android任务屏幕中的)功能？

我已经找到了“可以-滑动”指令，允许添加一些按钮，出现在部分滑动项目，但这不是我要找的。我需要完全滑动一个项目(两边)，并删除它时，它被滑动到屏幕的末尾。

Answer 1

好的，它似乎“离子列表”没有内置的“滑动删除”功能。

不过，我使用用于Angular.js的锤子插件和一些自定义指令和逻辑实现了它。允许列表-项目是可滑动的。然后，我使用如何从AngularJS中的范围中删除项？技术进行实际元素的删除。

Answer 2

我不建议按Dmytro的建议去做，有一个简单的方法。

使用可扩展选项

将#ionItem添加到正在滑动的ion-item，并将side="end"和(ionSwipe)事件添加到HTML中的ion-item-options中。

<ion-item #ionItem>
</ion-item>
<ion-item-options side="end" (ionSwipe)="swipedNotification(ionItem)">
    <ion-item-option class="notifications-swipe-button" expandable>&nbsp;</ion-item-option>
</ion-item-options>

在您的css中，将按钮的宽度设为30 of，这样您就可以触发ionSwipe，如果宽度太大，就不会调用它：

.notifications-swipe-button{
    width: 30px; 
}

在ts文件中，添加要在(ionSwipe)上调用的函数，并将内容动画到左侧：

swipedNotification(el){
    el.el.style.transform = `translate3d(calc(-100vw), 0px, 0px)`;
}

请记住，这是设置为向左滑动以解散，如果要向右滑动，则必须更新translate3d中的x属性。