//这么写，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>
m***@wyou.ltd
- 发布：2024-04-08 15:09
- 更新：2024-04-08 15:48
- 阅读：486
产品分类： uniapp/H5
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 13.0.1
HBuilderX类型： 正式
HBuilderX版本号： 3.6.18
浏览器平台： Chrome
浏览器版本： 123.0.6312.87
项目创建方式： HBuilderX
示例代码：
操作步骤：
看上方注释说明。
看上方注释说明。
预期结果：
使用iframe能直接滑动。
使用iframe能直接滑动。
实际结果：
iframe区域不能滑动；降低iframe层级，虽能滑动，但又无法和iframe加载页面交互。
iframe区域不能滑动；降低iframe层级，虽能滑动，但又无法和iframe加载页面交互。
bug描述：
nvue使用swiper，swiper-item嵌套iframe，iframe所在区域，无法滑动。
如果降低iframe的层级，则能滑动，但是iframe上的网址无法点击、触摸。
爱豆豆 - 办法总比困难多
iframe是被swiper包含的 是在同一个视图内的 要么swiper能滑动 要么iframe能滑动 只能二选一
你给swiper加上disable-touch这个属性 试试iframe内是否可以点击
m***@wyou.ltd (作者)
这个属性加上，类似降低swiper的层级，iframe当然可以点击，但就不能滑动了。现在的需求是既需要swiper的滑动，还需要iframe能交互。移动端用其他组件能实现，但h5端，交互事件冒泡貌似被阻止了。
2024-04-08 16:01
爱豆豆
回复 m***@wyou.ltd: 对 所以你只能二选一 如果你的iframe内容不需要左右滑动的话 你可以试试监听触摸事件 当用户左右移动的时候 关闭disable-touch 手指松开后在打开disable-touch 或者用户左右滑动时直接修改swiper 的current实现切换效果
2024-04-08 16:08
m***@wyou.ltd (作者)
回复 爱豆豆: 试过，并不可行。h5端的滑动监听touch之类的貌似失效，只在移动端可用。swiper就算禁用滑动，也获取不到触摸事件，后面的逻辑完成不了。
2024-04-09 17:06