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

Posted 2021-01-25 hhuizi

 

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