【报Bug】uniapp 移动端H5使用swiper,swiper-item嵌套web-view组件无法左右滑动切换，这是bug吗？

分类：uni-app

swiper web_view

<swiper style="z-index: 99999;" :current="swiperCurrent" @transition="transition"  
            @animationfinish="animationfinish" class="swiper">  
            <swiper-item class="swiper-item">  
                <web-view id="website-list" :webview-styles="webviewStyles" src="https://www.tbjh-health.com">  
                </web-view>  
                <cover-view class="active">  
                    我是webView  
                </cover-view>  
                </block>  
            </swiper-item>  
</swiper>

2022-06-01 17:52 负责人:无分享

4 个回复

DCloud_UNI_WZF

web-view 组件在 H5端 被转成 iframe 挂载到 body 下，类似于 vue3 的 teloport，在实现时设计如此，而此时滑动的是 swiper-item 组件，所以呈现为无法左右滑动。
针对当前业务场景可以采用 iframe 标签实现您的需求。

<swiper>  
    <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>

w***@163.com

没有效果

2025-07-01 17:50

1***@qq.com

使用iframe还是无法左右滑动呀，手在iframe上滑动不了

DCloud_UNI_WZF

提供下最简测试工程

2024-02-19 14:55

m***@wyou.ltd

同问，官方看起来还没解决iframe加载的内容区域，无法滑动 的问题。
目前正在做短视频项目，iframe占满全屏，视频完全没法滑动切换。

m***@wyou.ltd

找到临时解决办法，在上面再覆盖一层，提高层级关系，能获取到手势滑动做出响应了。

2024-04-03 16:29
m***@wyou.ltd

这么处理遇到新问题，由于iframe上加载的是视频播放器，覆盖一层解决了滑动，但播放器则无法响应点击，播放器封装的功能由于消息没传递下来失效。

2024-04-03 18:11

1***@qq.com

请问这个问题解决了吗

要回复问题请先登录或注册

【报Bug】uniapp 移动端H5使用swiper,swiper-item嵌套web-view组件无法左右滑动切换，这是bug吗？

4 个回复

公告

相关问题

【报Bug】uniapp 移动端H5使用swiper,swiper-item嵌套web-view组件无法左右滑动切换，这是bug吗？

与内容相关的链接

4 个回复

公告

相关问题