angularjs - ionic 列表 : swipe to remove?

Question

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

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

Answer 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属性。