0

是否可以在 onTouchStart 事件处理程序中从SwiperJS禁用对活动元素的模糊调用？

一些背景知识：
对于触摸和桌面设备，我使用 swiper 来制作 swiper-slides 上的表单。在我使用vue-select（一个组合框）的表单中。
问题：当用户选择一个条目时，第一次没有选择该条目，而是第二次选择了该条目。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div>First form</div>
      <v-select :options="selectionEntries"></v-select>
    </div>
    <div class="swiper-slide">
      <div>Second form</div>
      <v-select :options="selectionEntries"></v-select>
    </div>
  </div>
</div>

另请参阅codepen上的此示例

我发现它似乎工作正常：

  • 当我删除 vue-select 框的输入字段上的模糊侦听器时。但它用于在用户离开字段时关闭选择列表。
  • 当我在 SwiperJS 中注释掉这个模糊调用时。我不确定为什么在那里使用它。

第一点不是一个选项，那么是否可以通过配置禁用 SwiperJS 的模糊调用？

4

1 回答 1

0

目前我正在使用这种解决方法（SwiperJS V6.4.1）：

const swiper = new Swiper(".swiper-container", {
  // Workaround part 1:
  touchStartPreventDefault: false
})
// Workaround part 2:
swiper.touchEventsData.formElements = 'notExistingHtmlTagName'

第 1 部分：要处理所有元素上的鼠标按下和单击事件，请设置 swiper 参数touchStartPreventDefault: false。这将禁用此代码块：https ://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L90-L97

第 2 部分：设置swiper.touchEventsData.formElements = 'undefined'为没有定义任何东西作为 formElements。这将禁用调用模糊的代码块：https ://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L81-L88

于 2020-12-16T13:00:05.200 回答