Question

是否有可能实施＆＃34;刷卡移除＆＃34; （如在Android任务屏幕中）功能与＆＃34; ion-list＆＃34;？

我发现＆＃34;可以刷卡＆＃34;允许添加一些按钮显示在部分刷卡项目下的指令，但这不是我正在寻找的。我需要完全刷一个项目（两面），并在它被刷到屏幕的末尾时将其删除。

Answer 1

好的，似乎“ion-list”没有内置“刷卡到删除”功能。

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

Answer 2

我不建议您按照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 个答案: