Sweiper在react中的使用（解决分页器不显示问题）

 

 componentWillUnmount() {
          if  ( this .swiper) {  //   销毁swiper 
          this  .swiper.destroy()
        }
       }
      componentDidUpdate(){
         if ( this  .swiper){
           this .swiper.slideTo(0, 0 )
           this  .swiper.destroy()
           this .swiper =  null  ;
        }
         this .swiper =  new  Sweiper( this  .refs.banner, {
             loop:  true  ,
             pagination: {
             el:  '.banner-pagination' ,
             clickable:   true  ,
            },
           });
       } 

  return   (
             <div className="banner">
                
            <div className="swiper-container" ref="banner">
                <div className="swiper-wrapper banner-box"> 
                {
                    banners.map((item,index) => {
                          return   <div className="swiper-slide" key={index}>
                        <img src={getPic(item.image_hash)} className="banner-img"/>
                        </div>
                     })
                }
                   
                 </div>
                <div className="swiper-pagination banner-pagination"></div>
            </div>
            </div>
        ) 

 

查看更多关于Sweiper在react中的使用（解决分页器不显示问题）的详细内容...