Onsen UI Carousel 滑动列表项答案

【问题标题】：Onsen UI Carousel Swipe list itemOnsen UI Carousel 滑动列表项
【发布时间】：2015-01-20 10:26:00
【问题描述】：

我正在使用 onsen ui 框架的轮播功能，以便通过从左向右滑动来删除列表中的项目，就像在 ios/android 中一样。滑动显示一个“删除”按钮，该按钮应从列表中删除该项目并重新排序问题是，视图总是删除最后一行而不是我按下按钮的那一行，但是，该行在数据数组中被正确删除。

有人对此有答案吗？

*希望有s.o.有一个解决方案

【问题讨论】：

标签： angularjs carousel onsen-ui

【解决方案1】：

您应该提供一些代码，以便我们查看您的尝试。您是否使用ngRepeat 指令和<ons-list>？在这种情况下，您应该从数据数组中删除该项目。

在控制器中，您创建一个项目列表（可以是任何东西）：

angular.module('myApp').controller('MyController', function($scope) {
  $scope.items = ['A', 'list', 'of', 'items'];
});

在您的 HTML 中，您使用 ngRepeat 循环它们。要删除项目，请使用 ngClick 并拼接列表。

<ons-list>
  <ons-list-item ng-repeat="item in items">
    {{ item }}
    <ons-button ng-click="items.splice($index, 1)">Remove item</ons-button>
  </ons-list-item>
</ons-list>

我在以下示例中使用了轮播，但您在列表中添加的内容并不重要。 http://codepen.io/argelius/pen/qEmjEB

【讨论】：

嗨，安迪，谢谢！作品！关于这一点的有趣事实是，我几乎采用了相同的方法……但没有奏效。然后我复制了你的，没问题！干杯！
您好，安迪，感谢您提出这个想法。但是向右滑动而不是向左滑动怎么样？我该怎么做？
当然。只需切换轮播项目并在 codepen 示例中设置 initial-index="0"：codepen.io/argelius/pen/NPEoYm
好酷。如何以特定距离向右滑动以停止。像放置最大滑动距离之类的东西。 “删除”按钮的位置将完全显示。就像在 ios 中删除消息列表项一样。
是的，稍微调整一下应该不会有问题。