版权声明:转载请注明出处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!