离子列表：滑动删除？答案

【问题标题】：Ionic list: swipe to remove?离子列表：滑动删除？
【发布时间】：2014-12-23 03:49:13
【问题描述】：

是否有可能使用“ion-list”实现“滑动删除”（如在 Android 任务屏幕中）功能？

我找到了“can-swipe”指令，该指令允许添加一些出现在部分滑动项下的按钮，但这不是我想要的。我需要完全滑动一个项目（两侧）并在它滑动到屏幕末端时将其移除。

【问题讨论】：

如果您在顶级列表中使用 on-swipe 会发生什么？显然它本身不会做任何事情，但是将 console.log msg 添加到处理程序并查看它是否被调用。

标签： angularjs angularjs-directive angular-ui ionic-framework

【解决方案1】：

我不建议按照 Dmytro 的建议去做，有一种简单的方法可以做到这一点。

使用expandable options：

将#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中，将按钮的宽度设置为30px，这样你就可以触发ionSwipe，如果宽度太大则不会调用它：

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

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

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

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

【讨论】：

【解决方案2】：

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

尽管如此，我还是使用Hammer Plugin for Angular.js 和一些自定义指令和逻辑来实现它。这使得列表项可以滑动。然后我使用How to remove an item from scope in AngularJS? 技术进行实际元素移除。

【讨论】：