温泉如何在项目上进行部分滑动

Question

我正在使用 AngularJS 和 Onsen 框架开发移动应用程序。我向列表的每个项目添加了滑动。代码就像 this

这是输出：

我想要部分刷卡，而不是全部刷卡。我的意思是这样的：

你知道我是否可以使用 Onsen 或任何其他解决方法来做到这一点？另外你知道如何启用从右滑动而不是从左滑动吗？

Answer 1

左侧菜单解决方案:

从技术上讲，有一个选项可以设置轮播的项目大小，但也许只是让轮播更小并欺骗项目的大小会更容易。 Demo 1

ons-carousel {
  width: 25% !important;
  overflow: visible !important;
}
.list-action-item {
  width: 400% !important;
}

虽然丑，但是不加思索就写了差不多2行css。 :D

右键菜单解决方案

要在另一侧显示菜单，您只需删除 initial-index="1" 并交换 html 中的项目和菜单位置。之后你可以根据你想要达到的目的，用一些 css 来欺骗它。 Demo 2

在这个演示中，我最初也将 transform: none 添加到第一项，认为这样看起来更好。否则，项目将正常滑动。但是，如果您这样做，那么对于较小的物品，您可能无法在滑动时看到该物品，这就是我最初禁用移动的原因。

右键菜单解决方案2

对于 item-width 属性 - 如您所见，它是轮播的属性，但它适用于所有项目。旋转木马的制作方式期望所有项目的大小相同。如果需要，您可以使用 css 设置项目的宽度，但问题是轮播逻辑。

如果你想让它正常运行，你可以做的是为 item-width 的项目设置固定宽度，用 css 更改第一个项目的大小并添加正确的虚拟项目在它之后用于轮播逻辑。

.list-action-item {
  width: 100% !important;
}

<ons-carousel swipeable item-width="25%" auto-scroll>
  <ons-carousel-item class="list-action-item">Fruit</ons-carousel-item>
  <ons-carousel-item class="list-action-dummy"></ons-carousel-item>
  <ons-carousel-item class="list-action-dummy"></ons-carousel-item>
  <ons-carousel-item class="list-action-dummy"></ons-carousel-item>
  <ons-carousel-item class="list-action-menu">Delete</ons-carousel-item>
</ons-carousel>

假人的存在使自动滚动锁定到适当的位置。 Demo 3

备注

如果你想做的只是部分滑动但项目大小仍然相同，你可以只删除 auto-scroll 属性，然后它不会自动滚动到整个项目。

此外，如果您认为您想要的某些功能可能会吸引很多用户，请随时说出您希望 API 成为什么样的用户，并且可能会在未来。

温泉如何在项目上进行部分滑动

Onsen how to make partial swipe on item

javascript

angularjs

carousel

swipe

onsen-ui