uni-app nvue使用swiper时 swiper-item嵌套iframe iframe所在区域无法滑动问题

开发环境	版本号	项目创建方式
Mac	13.0.1	HBuilderX

# 示例代码：

```javascript
//这么写，iframe包含区域不能滑动；将下方注释代码加上，降低iframe的层级，
//虽包含区域可以滑动了，但src加载的若是本地html，其中包含第三方播放器等需要交互组件，则无法满足交互需求。
<swiper style="width: 500px;height: 300px;">
    <swiper-item>
        <iframe src="https://www.tbjh-health.com"></iframe>
    </swiper-item>
    <swiper-item>
        <iframe src="https://www.tbjh-health.com"></iframe>
    </swiper-item>
    <swiper-item>
        <iframe src="https://www.tbjh-health.com"></iframe>
    </swiper-item>
</swiper>

<style>
//降低层级
/* iframe {
        z-index: -1!important;
    } */
</style>

操作步骤：

看上方注释说明。

预期结果：

使用iframe能直接滑动。

实际结果：

iframe区域不能滑动；降低iframe层级，虽能滑动，但是iframe上的网址无法点击、触摸。

bug描述：

nvue使用swiper，swiper-item嵌套iframe，iframe所在区域，无法滑动。如果降低iframe的层级，则能滑动，但是iframe上的网址无法点击、触摸。

nodeper 1楼•2 天前

iframe是被swiper包含的是在同一个视图内的要么swiper能滑动要么iframe能滑动只能二选一你给swiper加上disable-touch这个属性试试iframe内是否可以点击

wuwangju 2楼•2 天前

这个属性加上，类似降低swiper的层级，iframe当然可以点击，但就不能滑动了。现在的需求是既需要swiper的滑动，还需要iframe能交互。移动端用其他组件能实现，但h5端，交互事件冒泡貌似被阻止了。

songsunli 3楼•2 天前

回复 m***@wyou.ltd: 对所以你只能二选一如果你的iframe内容不需要左右滑动的话你可以试试监听触摸事件当用户左右移动的时候关闭disable-touch 手指松开后在打开disable-touch 或者用户左右滑动时直接修改swiper 的current实现切换效果

sinazl 4楼•2 天前作者

回复爱豆豆: 试过，并不可行。h5端的滑动监听touch之类的貌似失效，只在移动端可用。swiper就算禁用滑动，也获取不到触摸事件，后面的逻辑完成不了。

sinazl 5楼•2 天前作者

在 uni-app 中使用 nvue 页面时，如果 swiper-item 中嵌套了 iframe，可能会出现 iframe 所在区域无法滑动的问题。这是因为 iframe 默认会捕获所有触摸事件，导致父容器（如 swiper）无法接收到滑动事件。

解决方法

使用 web-view 替代 iframe： uni-app 提供了 web-view 组件，它是专门用于在 uni-app 中嵌入网页的组件，通常比 iframe 更兼容。你可以在 swiper-item 中使用 web-view 来加载网页内容。

<template>
  <swiper>
    <swiper-item>
      <web-view src="https://example.com"></web-view>
    </swiper-item>
    <swiper-item>
      <web-view src="https://another-example.com"></web-view>
    </swiper-item>
  </swiper>
</template>

监听 iframe 的触摸事件：如果你必须使用 iframe，可以通过 JavaScript 监听 iframe 的触摸事件，并在事件触发时手动处理滑动逻辑。但这需要较为复杂的 JavaScript 代码，并且可能无法完全解决所有场景下的滑动问题。
调整 iframe 的大小和位置：确保 iframe 不会完全覆盖 swiper-item 的可滑动区域。你可以通过调整 iframe 的大小和位置，留出一些边缘区域供用户滑动。

使用 scroll-view 包裹 iframe：你可以尝试将 iframe 包裹在 scroll-view 中，这样用户可以通过 scroll-view 来滑动内容。不过，这种方法可能会影响用户体验，因为 scroll-view 和 swiper 的滑动可能会冲突。

<template>
  <swiper>
    <swiper-item>
      <scroll-view scroll-y="true" style="height: 100%;">
        <iframe src="https://example.com" style="width: 100%; height: 100%;"></iframe>
      </scroll-view>
    </swiper-item>
  </swiper>
</template>

使用 cover-view 覆盖 iframe：在 iframe 上方覆盖一个透明的 cover-view，用来捕获触摸事件并传递给 swiper。这种方法需要精确控制 cover-view 的大小和位置，以确保不会影响 iframe 的正常使用。

<template>
  <swiper>
    <swiper-item>
      <iframe src="https://example.com" style="width: 100%; height: 100%;"></iframe>
      <cover-view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent;"></cover-view>
    </swiper-item>
  </swiper>
</template>