react 中 用swiper 存在swiper互相干扰的问题解决方法

以下是app.jsx里的swiper

 

 <div className="swiper-container App-swiper">
                    <div className="swiper-wrapper">
                        <div className="swiper-slide">
                           <My/>
                        </div>
                        <div className="swiper-slide">
                           <Music/>
                        </div>
                        <div className="swiper-slide">
                           <Find/>
                        </div>
                    </div>
                </div>

 

  this.mySwiper = new Swiper('.App-swiper', {
      on: {
          slideChangeTransitionEnd: function(){
            //console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
            Store.dispatch({ //redux更新数据
              type:"options",
              n:this.activeIndex
            })
          }
        }
  })

以下是另一个组件里的swiper 

 <div className="swiper-container mySwipers swiper">
                    <div className="swiper-wrapper">{
                       this.state.list.slider && this.state.list.slider.map((item,index)=>{
                           //console.log('----item',item)
                           return <div className="swiper-slide" key={index}>
                             <img src={item.picUrl}/>
                           </div>
                       })
                      }</div>
                      <div className="swiper-pagination"></div>
                  </div>

this.swiper= new Swiper('.mySwipers',{
                autoplay: {
                    delay: 2000,//1秒切换一次
                  },
                pagination: {
                    el: '.swiper-pagination',
                  },
            })

以上是第二个swiper 

解决方法：原本的swiper-container保留，实例的时候新添加不一样的class（如：myswiper ， App-swiper）;就可解决