vue SPA同一页面多个组件使用swiper,按钮互串

黑山老妖

同一页面,多个组件中都使用了swiper组件,但是当改变swiper左右前进按钮的时候,会引发多个swiper互串,一个按钮控制多个swiper组件内块的滑动

1. <swiper :options="swiperOption">
   
2.             <swiper-slide>
   
3.    
   
4.             </swiper-slide>
   
5.             <div class="swiper-pagination"  slot="pagination"></div>
   
6.             <div class="swiper-button-prev" slot="button-prev">
   
7.                 <i class="ivu-icon ivu-icon-ios-arrow-back"></i>
   
8.             </div>
   
9.             <div class="swiper-button-next" slot="button-next">
   
10.                 <i class="ivu-icon ivu-icon-ios-arrow-forward"></i>
    
11.             </div>

复制代码

1. <div class="swiper-wrap">
   
2.         <swiper :options="swiperOption" ref="mySwiper">
   
3.             <swiper-slide >
   
4.                
   
5.             </swiper-slide>
   
6.             <div class="swiper-pagination"  slot="pagination"></div>
   
7.         </swiper>
   
8.         <div class="swiper-button-prev" slot="button-prev">
   
9.             <i class="ivu-icon ivu-icon-ios-arrow-back"></i>
   
10.         </div>
    
11.         <div class="swiper-button-next" slot="button-next">
    
12.             <i class="ivu-icon ivu-icon-ios-arrow-forward"></i>
    
13.         </div>
    
14.     </div>

复制代码

第一个和第二个swiper的  swiper-button-next和swiper-button-prev会相互控制