问题：在页面全屏状态下，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();
},