Javascript Onsen如何对项目进行部分扫描

我正在使用

AngularJS

和

Onsen

框架开发移动应用程序。我将滑动添加到列表的每个项目中。代码如下

以下是输出：

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

你知道我是否可以用Onsen或其他解决方法来解决这个问题吗？

---

此外，您知道如何启用从右侧而不是从左侧刷卡吗？

左侧菜单解决方案：

从技术上讲，有一个选项可以设置旋转木马的项目大小，但可能只需将旋转木马变小并对项目大小进行欺骗就更容易了。

这很难看，但它几乎是两行css，没有任何思考：D

右菜单解决方案

要使菜单位于另一侧，只需删除

initial index=“1”

，并在html中交换项目和菜单位置即可。之后，根据您想要实现的目标，您可以使用一些css来欺骗它

在这个演示中，我最初还在第一项中添加了

transform:none

，认为这样看起来更好。否则，项目将正常滑动。但是，如果您这样做，那么对于较小的项目，您可能无法在刷卡时看到该项目，这就是我最初禁用移动的原因

右菜单解决方案2

对于

项目宽度

属性-正如您所看到的，它是转盘的一个属性，但适用于所有项目。旋转木马的制作方式要求所有物品大小相同。如果需要，可以使用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>

如果您想让它正常运行，您可以做的是为

项目宽度

的项目设置一个固定的宽度，使用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>

。列出操作项{
宽度：100%！重要；
}
果
删除

假人的存在使得自动滚动锁定到正确的位置

注释

如果您想做的只是部分滑动，但仍然具有相同的项目大小，您可以删除

自动滚动

属性，然后它将不会自动滚动到整个项目

---

此外，如果您认为您想要的某些功能可能会吸引很多用户，那么您可以自由地说，您希望API为他们提供什么样的功能，将来可能会考虑它。

如何设置项目大小？你是说

项目宽度
？如何使用它？
项目宽度
它是
ons carousel
的一个属性，不适用于
ons carousel项目
。无论如何，您的CSS解决方案无法正常工作。如果项目的内容是一个长文本而不是“苹果”怎么办？在这种情况下，当您刷卡时，新项目会覆盖其他项目。我只是手动禁用了它，因为我认为这样看起来更好。您不能禁用它，它将按预期移动。我更新了我的答案，解释了如何使用
项目宽度
解决您的问题。也可以随意查看您想要的行为是否只适合没有
自动滚动
属性的旋转木马：