如何在 PhoneGap 应用程序中使用 ONSEN-UI 实现 iOS 类型的滑动删除功能？

Question

我正在使用 ONSEN-UI 开发 PhoneGap allication 供我个人使用。现在我的一个页面上有多个 ons-list-items，例如 ListView。我想实现 iOS 类型的功能，即如果我向左滑动列表项或写入，它会要求我删除列表项，并在确认后删除该列表项。

                           **OR**

如果那不可能，那么我在该页面上选择一个编辑按钮，然后单击该按钮，另一个删除按钮将从所有列表项的左侧或右侧滑出。通过单击一个特定的删除按钮，该列表项将被删除。

那么如何获得这个功能呢？任何帮助将不胜感激！

Answer 1

您可以在 <ons-list-item> 中使用 <ons-carousel> 来实现此效果。

<ons-page>
  <ons-list>
    <ons-list-item style="padding: 0" ng-repeat="item in [1,2,3,4,5,6,7]">
        <ons-carousel style="height: 44px; width: 100%" swipeable initial-index="1" auto-scroll>
          <ons-carousel-item>
            <a href="#">Delete</a>
          </ons-carousel-item>
          <ons-carousel-item>
            Item {{ item }}
          </ons-carousel-item>
        </ons-carousel>
    </ons-list-item>
  </ons-list>
</ons-page>

请参阅此 Codepen 以获取工作示例： http://codepen.io/argelius/pen/YPmjwm

如何在 PhoneGap 应用程序中使用 ONSEN-UI 实现 iOS 类型的滑动删除功能？

How to implement iOS type ON SWIPE DELETE feature using ONSEN-UI in PhoneGap Application?

jquery

ios

angularjs

cordova

onsen-ui