React中使用swiper的具體方法

時間 2019-11-30

原文原文鏈接

最近的react項目須要使用輪播圖，天然而然的就想到了swiper，一直想經過npm安裝的方式來使用，可是網上找了不少，資料不多，因而就暫時經過在index.html裏直接引用swiper的js和css文件的方式來加載，下面來講一下具體的步驟和使用方法。css

首先說一下我這裏使用的是swiper3x系列。接下來講具體的步驟：在index.html中引入js和css文件html

<!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週期。vue

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只是將數據寫死在了組件裏，通常狀況應該是經過異步來進行獲取數據。node

其實，這裏還有一個問題，就在於給swiper-slide添加點擊事件，通常來講是直接給swiper-slide這個div添加一個onClick事件，可是問題就出如今了這裏，若這個輪播是能夠循環輪播的話，swiper會自動生成兩個節點，一個是第一個節點，一個是最後一個節點，分別放置於最後和最開始，便於輪播聯動。然而他複製節點的時候，沒法複製其onClick的點擊事件，這就形成了當swiper初始化完成之後向左滑動第一個和向右滑動到最後一個再滑一次這兩個節點是沒有點擊事件的。因而咱們就應該使用到swiper的回調函數了，下面咱們對構建swiper的方法進行改造一下。react

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便可。webpack

上面有一個判斷是否點擊的是底部圓的點判斷我在下面貼出來供你們參考web

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;
}
複製代碼

結語面試

感謝您的觀看，若有不足之處，歡迎批評指正。npm

本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。