使用swiper插件，隐藏swiper后再显示，不会触发自动播放的解决办法

问题：

项目中有一个需求，当点击P1时，两个页面进行轮播。当点击P2时，页面不轮播。

设置好以后，点击P2，再点击P1，此时页面不能自动轮播，只能手动触发。

解决：

在轮播器配置里，配置observer值为true，即可自动初始化swiper。此时不需手动触发，就可自动轮播。

代码如下：

 

      swiperOption3: {
        autoplay: 3 * 1000,
        setWrapperSize: true,
        autoplayDisableOnInteraction: false,
        observer: true,    　　　　// 启动动态检查器，当改变swiper的样式（例如隐藏/显示）
                                     或者修改swiper的子元素时，自动初始化swiper。
                                     默认false，不开启，可以使用update()方法更新。
        observeParents: true,    //  将observe应用于Swiper的父元素。当Swiper的父元素变化时，
　　　　　　　　　　　　　　　　　　　　　　 例如window.resize，Swiper更新。
        direction: 'horizontal',
        pagination: '.a2-swiper-roam3',
        paginationClickable: true
      },                        

 

关于observer的官方解读，请点击链接