### [uniapp 移动端嵌套H5使用swiper,swiper-item嵌套web-view组件滑动切换](https://pmself.com/article/1673)

**Published:** 2022-11-08T06:24:36

**Author:** crawlpw

**Excerpt:** web-view 组件在 H5端 被转成 iframe 挂载到 body 下，类似于 vue3 的 telop…

![](https://pmself.com/wp-content/uploads/2022/11/20221108142311.jpg)

```
<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.xxx.com">  
                </web-view>  
                <cover-view class="active">  
                    我是webView  
                </cover-view>  
                </block>  
            </swiper-item>  
</swiper>
```

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

```
<swiper>  
    <swiper-item>  
        <iframe src="https://www.xxx.com"></iframe>  
    </swiper-item>  
    <swiper-item>  
        <iframe src="https://www.xxx.com"></iframe>  
    </swiper-item>  
    <swiper-item>  
        <iframe src="https://www.xxx.com"></iframe>  
    </swiper-item>  
</swiper>
```

如果是WP提供的嵌套APP，则可以直接使用最上面的代码嵌入即可，如下：

```


<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.xxx.com">  
                </web-view>   
            </swiper-item>  
</swiper

```

**Tags:** swiper, uniapp, web-view

**Categories:** Uniapp, 技术

---