在react中使用swiper插件

版权声明：转载请注明出处https://blog.csdn.net/weixin_42046201 https://blog.csdn.net/weixin_42046201/article/details/82114456

$npm install swiper

安装成功之后引入swiper

import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'

这里引入主要是为了后期打包（build）的时候不报错

componentDidMount(){
    var mySwiper = new Swiper('.swiper-container', {
       slidesPerView : 3,
       spaceBetween : 20,
    })
}

引入之后我们在didmount里实例化swiper

<div className='banner'>
    <div className='swiper-container'>
        <div className='swiper-wrapper'>
            {
                this.state.bag.map((item,index)=>{   // this.state.bag是在state里面定义的数组为了循环数据
                    return(                                    
                        <div key={index} ref="myli" onClick={()=>this.getcommodity(index)} className=                            
                        {this.state.classId == index?this.state.arr.join(' '):"swiper-slide"}>
                        <div className={this.state.classId == index ?style.low:null}></div>
                        <div className="show">
                        <img src={item.img}></img>
                        <p>{item.title}</p>
                        </div>
                        </div>
                    )
                })
            }
    </div>
</div>

之后就可以再render()里面写我们的html代码

 end：

          可能会存在很多bug，但是没有什么bug是用原生解决不了的

javascript   is very good！