Swiper页面尺寸改变时，无法实现自适应

最新推荐文章于 2024-10-10 10:54:49 发布

原创最新推荐文章于 2024-10-10 10:54:49 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

helsonlin@163.com

文章标签：

#vue

博客内容讲述了在页面全屏时遇到Swiper图片未能填充整个Dom的问题。作者通过F12检查发现图片和Dom高度不一致，怀疑是窗口大小改变时Swiper未更新导致。为解决此问题，作者在window.onresize事件中强制重新渲染Dom，成功修复了图片高度问题。测试验证了这种方法的有效性。博客涉及的技术包括Vue.js、Swiper和CSS布局。

问题：在页面全屏状态下，swiper img没有自动去铺满Dom

非全屏：img铺满了Dom

全屏：可以明显看到下面的空白区域

问题分析：F12, 查看全屏状态下图片与Dom的样式。

可以看到图片和上级的Dom样式高度为304；而swiper-container的高度为350。

猜想可能是页面Resize时候，Swiper没有更新导致了。

测试解决方案：

强制让Dom在window.onresize时重新渲染，再查看图片高度变化。

测试没问题ok

//dom
<div id="banner">
        <div class="swiper-container" v-if="reRender">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in imgs" :key="index">
                    <img  @click="routerUrl(item)" :src="getUrl(item.url)" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
//methods
forceRerender() {
            // 从 DOM 中删除 my-component 组件
            this.reRender = false;
            this.$nextTick(() => {
                // 在 DOM 中添加 my-component 组件
                this.reRender = true;
                this.getBannerList();
            });
},
//
created() {
        window.onresize = () => {
            this.forceRerender();
        };
        this.getBannerList();
    },