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

不念不忘少年蓝@ 2022-08-30 05:28 468阅读 0赞

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

非全屏：img铺满了Dom

![00191cbc451f06438ff7c8a64bac0a01.png][]

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

![d7569715045203c24ebeb1bb70afdfd2.png][]

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

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

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

![1dc75aa86a7992d9c96e30be389e465c.png][]

![adba90f8be2f69fa122b545dd0182bb9.png][]

测试解决方案：

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

测试没问题ok

![efb89060dea7554ce797f92f26b77e15.png][]

//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();
        },

> 版本信息：“swiper”: “^3.4.2”, “vue”: “^2.6.10”,

[00191cbc451f06438ff7c8a64bac0a01.png]: /images/20220829/ceb6bcbcba2548559af02104e216961f.png
[d7569715045203c24ebeb1bb70afdfd2.png]: /images/20220829/52c986aed4134c8699db675507aed91f.png
[1dc75aa86a7992d9c96e30be389e465c.png]: /images/20220829/bb6bb1ace22241c188c9270d78992914.png
[adba90f8be2f69fa122b545dd0182bb9.png]: /images/20220829/55a3a0705d754f15b1d3e33bd93347c4.png
[efb89060dea7554ce797f92f26b77e15.png]: /images/20220829/a6c3b518bd2f4fe3b2913aaefedd1206.png