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

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 添加到第一项，认为这样看起来更好。否则，项目将正常滑动。但是，如果您这样做，那么对于较小的元素，您可能无法在滑动时看到该元素，这就是我最初禁用移动的原因。

右键菜单方案二

对于 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 是什么样的，将来可能会考虑。