最近的react项目需要使用轮播图，自然而然的就想到了swiper，一直想通过npm安装的方式来使用，但是网上找了很多，资料很少，于是就暂时通过在index.html里直接引用swiper的js和css文件的方式来加载，下面来说一下具体的步骤和使用方法。
首先说一下我这里使用的是swiper3x系列。接下来说具体的步骤：
在index.html中引入js和css文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta content="#000000"> <link href="https://www.jb51.net/%PUBLIC_URL%/manifest.json" > <link href="https://www.jb51.net/%PUBLIC_URL%/favicon.ico" > <link type="text/css" href='https://www.jb51.net/%PUBLIC_URL%/static/css/swiper.min.css'> <title>React App</title> </head> <body> <div></div> <script src='https://www.jb51.net/%PUBLIC_URL%/static/js/swiper.min.js'></script> </body> </html>
当然，我这个是将js和css文件下载到了本地，你也可以使用cdn路径，至此，引入基本上算是引入完成了，接下来就是如何在react组件中进行调用
在这里需要说一下，引入的js文件在组件当中不能直接使用，需要在最开始的位置声明一个变量，后续的使用方法和普通的html写法就一致了，区别就在于应该在哪个生命周期中写，个人建议实在componentDidUpdate周期中进行写，因为有时候数据是异步获取的，刚刚完成时不一定数据获取完成，数据获取完成以后更新state，此时会触发update周期。
import React,{Component} from 'react' let Swiper = window.Swiper class About extends Component{ constructor(props){ super(props); this.state = { myName : "这里是about页面", } } 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 Swiper(this.refs.lun, { loop:true, pagination: { el: '.swiper-pagination', clickable: true, }, }); } render(){ return ( <div> <div className="swiper-container" ref="lun"> <div className="swiper-wrapper"> <div className="swiper-slide" data-id="0">Slide 1</div> <div className="swiper-slide" data-id="1">Slide 2</div> <div className="swiper-slide" data-id="2">Slide 3</div> <div className="swiper-slide" data-id="3">Slide 4</div> <div className="swiper-slide" data-id="4">Slide 5</div> <div className="swiper-slide" data-id="5">Slide 6</div> <div className="swiper-slide" data-id="6">Slide 7</div> <div className="swiper-slide" data-id="7">Slide 8</div> <div className="swiper-slide" data-id="8">Slide 9</div> <div className="swiper-slide" data-id="9">Slide 10</div> </div> <div> <div className="swiper-pagination"></div> </div> </div> </div> ) } } export default About
如此便完成了一个轮播的实现，这里我写的demo只是将数据写死在了组件里，一般情况应该是通过异步来进行获取数据。
其实，这里还有一个问题，就在于给swiper-slide添加点击事件，一般来说是直接给swiper-slide这个div添加一个onClick事件，但是问题就出现在了这里，若这个轮播是可以循环轮播的话，swiper会自动生成两个节点，一个是第一个节点，一个是最后一个节点，分别放置于最后和最开始，便于轮播联动。然而他复制节点的时候，无法复制其onClick的点击事件，这就造成了当swiper初始化完成以后向左滑动第一个和向右滑动到最后一个再滑一次这两个节点是没有点击事件的。于是我们就应该使用到swiper的回调函数了，下面我们对构建swiper的方法进行改造一下。
this.swiper = new Swiper(this.refs.lun, { loop:true, pagination: { el: '.swiper-pagination', clickable: true, onClick: function(swiper,e){ var paginationContainer= document.getElementById('PgFather'); var paginationFather = document.getElementById('body-left-pagination'); //这里是判断是否点击的轮播底部圆点，因为方法在点击圆点的时候也会触发，所以为了能保证点击圆点轮播效果，应该将其屏蔽掉 if(!this.isDOMContains(paginationFather,e.target,paginationContainer)){ var se = document.querySelectorAll(".body-left-lunbo .swiper-slide"); var nowNode = ""; var index = swiper.activeIndex; if(index==0){ index = se.length-3; }else if(index==se.length-1){ index=0; }else{ index = swiper.activeIndex-1; } if(self.state.swiperList.length===1){ nowNode = se[0]; }else{ for(var i=0;i<se.length;i++){ if(se[i].getAttribute('data-swiper-slide-index')==index){ nowNode = se[i] } } } if(nowNode){ var id= nowNode.getAttribute("data-id"); var itemObj = { id:id } goDetail(itemObj,self.state.myName) return true } }else{ return false } } }, });