1. 程式人生 > >Sweiper在react中的使用(解決分頁器不顯示問題)

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> )