swiper——vue页面配合显示隐藏渲染两个轮播插件

ゝ一世哀愁。 2022-09-11 06:12 239阅读 0赞

## swiper——vue页面配合显示隐藏渲染两个轮播插件 ##

### 问题：显示隐藏 ###

项目中使用vue v-show控制轮播盒子不同渲染，但是会出现第一次点击，轮播插件显示出现错误，具体表现为轮播子元素只剩下一个，且为缩小状态，需要多次切换显示轮播才能正常显示  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASnVsaWV0X3htag_size_20_color_FFFFFF_t_70_g_se_x_16]

### 解决： this.$nextick() ###

#### 1.注意两个轮播盒子要使用不同的父元素，swiper-container不能用做最外层盒子 ####

#### 2.切换显示隐藏方法需要调用加载swiper方法 ####

#### 3.使用this.$nextTick()方法防止swiper方法初始化出现问题 ####

#### 4.方法切换显示轮播不需要在mounted页面初始化调用轮播事件 ####

<button @click="showBtn1">显示第一个轮博</button>
    <button @click="showBtn2">显示第二个轮博</button>
    // 简化写，第一个轮播插件，根绝show1显示隐藏
    <div class="long" v-show="show1">
      <div class="swiper-container">
       <ul class="swiper-wrapper">
       	<li class="swiper-slide flex" v-for="item in swiperInfo" :key="item.title"></li>
        </ul>
       </div>
      </div>
     
    //第二个轮播插件，根绝show2显示隐藏
    <div class="long1" v-show="show2">
      <div class="swiper-container">
        <ul class="swiper-wrapper">
          <li class="swiper-slide flex" v-for="item in swiperInfo1" :key="item.title"></li>
        </ul>
      </div>
    </div>
    
    //按钮方法显示并初始化第一个轮播，传入对应的轮播父元素类名
    showBtn1 () { 
    	this.show1 = true
    	this.show2 = false
    	this.swiperBox('.long .swiper-container')
    }
    //按钮方法显示并初始化第二个轮播
    showBtn2 () { 
    	this.show2 = true
    	this.show1 = false
    	this.swiperBox('.long1 .swiper-container')
    }

// 轮播初始化方法，传入对应的轮播父元素类名
    swiperBox (className) { 
       this.$nextTick(() => { 
         const swiper = new Swiper(className, { 
           slidesPerView: 3,
           spaceBetween: 100,
           centeredSlides: true,
           loop: true,
           slideToClickedSlide: true,
           observeParents: true, // 修改swiper的父元素时，自动初始化swiper
           pagination: { 
             el: '.swiper-pagination',
             clickable: true
           }
         })
         return swiper
       })
     }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASnVsaWV0X3htag_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/dcf294e560bb4d80a796e999cfe6e42a.png