Detaillierte Erläuterung der Schritte zur Verwendung von Swiper in React-js-Tutorial-php.cn

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Verwendung von Swiper in React. Was sind die Vorsichtsmaßnahmen für die Verwendung von Swiper in React?

Text

Ein aktuelles Reaktionsprojekt muss Karussellbilder verwenden, also dachte ich natürlich an Swiper und wollte es schon immer installieren Ich habe es über npm verwendet, aber ich habe viel im Internet gefunden und es gab nur sehr wenige Informationen, also habe ich es vorübergehend geladen, indem ich direkt auf die JS- und CSS-Dateien von Swiper in index.html verwiesen habe. Lassen Sie uns über die spezifischen Schritte und die Verwendung sprechen.

Zuallererst verwende ich hier die swiper3x-Serie. Lassen Sie uns als Nächstes über die spezifischen Schritte sprechen:

JS- und CSS-Dateien in index.html einführen

<!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=&#39;%PUBLIC_URL%/static/css/swiper.min.css&#39;>
 
  <title>React App</title>
 </head>
 <body>
  <p id="root"></p>
  <script src=&#39;%PUBLIC_URL%/static/js/swiper.min.js&#39;></script>
 </body>
</html>

Nach dem Login kopieren

Natürlich habe ich die JS- und CSS-Dateien lokal heruntergeladen Sie können auch den CDN-Pfad verwenden. Der nächste Schritt besteht darin, ihn in der Reaktionskomponente aufzurufen. Hier muss erwähnt werden, dass die importierte js-Datei nicht direkt verwendet werden kann In der Komponente müssen Sie gleich zu Beginn eine Variable deklarieren. Die anschließende Verwendungsmethode ist die gleiche wie bei der normalen HTML-Schreibmethode Es wird empfohlen, es in den ComponentDidUpdate-Zyklus zu schreiben, da Manchmal werden die Daten asynchron abgerufen und die Datenerfassung ist möglicherweise noch nicht abgeschlossen. Nach Abschluss der Datenerfassung wird der Status aktualisiert und der Aktualisierungszyklus ausgelöst zu diesem Zeitpunkt.

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 (
  <p>
   <p className="swiper-container" ref="lun">
   <p className="swiper-wrapper">
   <p className="swiper-slide" data-id="0">Slide 1</p>
   <p className="swiper-slide" data-id="1">Slide 2</p>
   <p className="swiper-slide" data-id="2">Slide 3</p>
   <p className="swiper-slide" data-id="3">Slide 4</p>
   <p className="swiper-slide" data-id="4">Slide 5</p>
   <p className="swiper-slide" data-id="5">Slide 6</p>
   <p className="swiper-slide" data-id="6">Slide 7</p>
   <p className="swiper-slide" data-id="7">Slide 8</p>
   <p className="swiper-slide" data-id="8">Slide 9</p>
   <p className="swiper-slide" data-id="9">Slide 10</p>
  </p>
<p id="PgFather">
 <p className="swiper-pagination" id=&#39;body-left-pagination&#39;></p>
</p>
  
 </p>
  </p>
 )
 }
}
export default About

Nach dem Login kopieren

Damit ist die Implementierung eines Karussells abgeschlossen. Die Demo, die ich hier geschrieben habe, schreibt die Daten nur asynchron in die Komponente.

Eigentlich gibt es hier ein weiteres Problem, nämlich das Hinzufügen eines Klickereignisses zum Swiper-Slide. Im Allgemeinen fügen Sie ein onClick-Ereignis direkt zum Swiper-Slide hinzu, aber das Problem tritt hier auf Wenn das Karussell in einer Schleife gedreht werden kann, generiert Swiper automatisch zwei Knoten, einer ist der erste Knoten und der andere der letzte Knoten, die jeweils am Ende und am Anfang platziert werden, um die Karussellverknüpfung zu erleichtern. Als er den Knoten kopierte, konnte er jedoch sein onClick-Klickereignis nicht kopieren. Dies führte dazu, dass es nach Abschluss der Swiper-Initialisierung kein Klickereignis für diese beiden Knoten gab, wenn der erste nach links und nach rechts verschoben wurde nochmal zum letzten. Wir sollten also die Rückruffunktion

von Swiper verwenden. Lassen Sie uns die Methode zum Erstellen von Swiper umwandeln.

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
      }
    }
      },
     });

Nach dem Login kopieren

Das Klickereignis von Swiper kann mit der oben genannten Methode realisiert werden. Ich habe dem obigen Code eine Bedingung hinzugefügt, dass der Klick ungültig ist. Wenn es nur einen Knoten gibt, weisen Sie nowNode Can direkt zu .

Oben gibt es einen Punkt, um zu beurteilen, ob der Klick auf den unteren Kreis erfolgt. Ich werde ihn unten als Referenz veröffentlichen.

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;
 }
 //如果浏览器支持contains
 if(parentEle.contains){
  return parentEle.contains(ele)
 }
 //火狐支持
 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;
 }
 return false;
}

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall gelesen haben Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

php generiert eine Zeichenfolge aus Zufallszahlen, Buchstaben oder gemischten Zahlen und Buchstaben

php schneidet die ab Bild als Detaillierte Erklärung der Schritte mit fester Größe

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von Swiper in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!