React中使用swiper的具體方法
最近的react專案需要使用輪播圖，自然而然的就想到了swiper，一直想通過npm安裝的方式來使用，但是網上找了很多，資料很少，於是就暫時通過在index.html裡直接引用swiper的js和css檔案的方式來載入，下面來說一下具體的步驟和使用方法。
首先說一下我這裡使用的是swiper3x系列。接下來說具體的步驟：
在index.html中引入js和css檔案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow" > <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow" > <link rel="stylesheet" type="text/css" href='%PUBLIC_URL%/static/css/swiper.min.css'> <title>React App</title> </head> <body> <div id="root"></div> <script src='%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頁面", }/歡迎加入全棧開發交流圈一起學習交流：864305860 } 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, }, });//歡迎加入全棧開發交流圈一起學習交流：864305860 } 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>//歡迎加入全棧開發交流圈一起學習交流：864305860 <div id="PgFather"> <div className="swiper-pagination" id='body-left-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]
}//歡迎加入全棧開發交流圈一起學習交流：864305860
}//面向1-3年前端人員
}//幫助突破技術瓶頸，提升思維能力
if(nowNode){
var id= nowNode.getAttribute("data-id");
var itemObj = {
id:id
}
goDetail(itemObj,self.state.myName)
return true
}
}else{
return false
}
}//歡迎加入全棧開發交流圈一起學習交流：864305860
},//面向1-3年前端人員
});//幫助突破技術瓶頸，提升思維能力
通過上面方法就可以實現了swiper的點選事件。我上面的程式碼中補充了一種條件就是當swiper輪播節點只有一個的時候回出現點選無效的情況，針對這一情況在方法裡進行判斷一下，如果只有一個節點直接將節點0賦值給nowNode即可。
上面有一個判斷是否點選的是底部圓的點判斷我在下面貼出來供大家參考
isDOMContains:function(parentEle,ele,container){
console.log(parentEle)
//判斷一個節點是否是其子節點
//parentEle: 要判斷節點的父級節點
//ele:要判斷的子節點
//container : 二者的父級節點
//如果parentEle h和ele傳的值一樣，那麼兩個節點相同
if(parentEle == ele){
return true
}
if(!ele || !ele.nodeType || ele.nodeType != 1){
return false;
}//歡迎加入全棧開發交流圈一起學習交流：864305860
//如果瀏覽器支援contains
if(parentEle.contains){
return parentEle.contains(ele)
}//歡迎加入全棧開發交流圈一起學習交流：864305860
//火狐支援
if(parentEle.compareDocumentPosition){
return !!(parentEle.compareDocumentPosition(ele)&16);
}
//獲取ele的父節點
var parEle = ele.parentNode;
while(parEle && parEle != container){
if(parEle == parentEle){
return true;
}
parEle = parEle.parentNode;
}//歡迎加入全棧開發交流圈一起學習交流：864305860
return false;
}
結語
感謝您的觀看，如有不足之處，歡迎批評指正。
本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。