Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Schritte zur Verwendung von Swiper in React
Detaillierte Erläuterung der Schritte zur Verwendung von Swiper in React
- php中世界最好的语言Original
- 2018-05-21 13:51:262544Durchsuche
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='%PUBLIC_URL%/static/css/swiper.min.css'> <title>React App</title> </head> <body> <p id="root"></p> <script src='%PUBLIC_URL%/static/js/swiper.min.js'></script> </body> </html>
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='body-left-pagination'></p>
</p>
</p>
</p>
)
}
}
export default AboutDamit ist die Implementierung eines Karussells abgeschlossen. Die Demo, die ich hier geschrieben habe, schreibt die Daten nur asynchron in die Komponente. 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
}
}
},
});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 .
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;
}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!