So verwenden Sie die Swiper-Methode in React-js-Tutorial-php.cn

Dieses Mal zeige ich Ihnen, wie Sie die Swiper-Methode in React verwenden und welche Vorsichtsmaßnahmen für die Verwendung der Swiper-Methode in React gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 An diesem Punkt ist die Einführung im Grunde genommen abgeschlossen. Der nächste Schritt besteht darin, wie man sie in der Reaktionskomponente aufruft.

Hier muss gesagt werden, dass die importierte js-Datei nicht direkt in der Komponente verwendet werden kann und muss Deklarieren Sie eine Variable ganz am Anfang, und die anschließende Verwendungsmethode ist dieselbe wie bei der normalen HTML-Schreibmethode. Der Unterschied besteht darin, in welchem Lebenszyklus sie geschrieben werden soll. Persönlich wird empfohlen, sie im ComponentDidUpdate-Zyklus zu schreiben , da die Daten manchmal asynchron abgerufen werden und nicht aktualisiert werden, wenn sie gerade abgeschlossen sind. Der Status wird nach Abschluss der Datenerfassung aktualisiert. Zu diesem Zeitpunkt wird der Aktualisierungszyklus ausgelöst.

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. Daher sollten wir 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:

Wie man Seajs verwendet, um Konventionen in require zu schreiben

Wie man AngularJS-Bereiche verwendet

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Swiper-Methode in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!