swiper父级元素处于隐藏状态滚动效果失效问题

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

在使用vue-awesome-swiper的时候,实现这样一个功能, 点击页面的banner图(Banner.vue),进入一个图片画廊(Gallary.vue),可以查看更多相关的照片,但发现轮播图滚动效果失效

原因是:一开始Gallay.vue的所有用swiper控制的图片处于隐藏状态,直到点击才进入图片画廊显示图片。swiper其父级元素处于隐藏状态(display:none), 会导致swiper初始化失败, 页面中的滚动效果就会有问题。

Gallary.vue的结构

<template>
    <div class="container"  @click="handleGallaryClick">
        <div class="wrapper">
            <swiper :options="swiperOption">
                <swiper-slide v-for="(item, index) of imgs" :key="index">
                    <img class="swiper-img" :src="https://segmentfault.com/a/1190000021392124/item">
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

一开始Gallary组件都是通过父组件Banner的v-show值设置处于隐藏状态

解决办法:
通过swiper的配置项:

observer
启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时

observeParents
将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新。

data () {
    return {
        swiperOption: {
            pagination : {
                el: '.swiper-pagination',
                type: 'fraction'
            },
            observeParents: true, //修改swiper的父元素时,自动初始化swiper
            observer: true   //修改swiper自己或子元素时,自动初始化swiper
        }
    }
},

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看