Cette fois, je vais vous montrer comment utiliser la méthode swiper en réaction et quelles sont les précautions à prendre pour utiliser la méthode swiper en réaction. Ce qui suit est un cas pratique, jetons un coup d'oeil.
Texte
Un projet React récent doit utiliser des images de carrousel, donc naturellement j'ai pensé à swiper, et j'ai toujours voulu l'installer via npm. Je l'ai utilisé, mais j'en ai trouvé beaucoup sur Internet et il y avait très peu d'informations, je l'ai donc temporairement chargé en référençant directement les fichiers js et css de swiper dans index.html. Parlons des étapes spécifiques et de leur utilisation.
Tout d'abord, j'utilise ici la série swiper3x. Parlons ensuite des étapes spécifiques :
Introduire les fichiers js et css dans index.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>
<p id="root"></p>
<script src='%PUBLIC_URL%/static/js/swiper.min.js'></script>
</body>
</html>
Copier après la connexion
Bien sûr, j'ai téléchargé les fichiers js et css localement, vous pouvez également utiliser cdn path. À ce stade, l'introduction est pratiquement terminée. L'étape suivante est de savoir comment l'appeler dans le composant React
Il faut dire ici que le fichier js importé ne peut pas être utilisé directement dans le composant. doit être appelé au début. Déclarez une variable à l'emplacement, et la méthode d'utilisation suivante est la même que la méthode d'écriture HTML ordinaire. La différence réside dans le cycle de vie dans lequel elle doit être écrite. Personnellement, il est recommandé d'écrire. dans le cycle composantDidUpdate, car parfois les données sont obtenues de manière asynchrone et viennent de se terminer. L'acquisition des données peut ne pas être terminée lorsque l'acquisition des données est terminée, l'état est mis à jour et le cycle de mise à jour sera terminé. être déclenché à ce moment.
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 AboutCopier après la connexion
Ceci termine l'implémentation d'un carrousel. La démo que j'ai écrite ici écrit uniquement les données dans le composant. En général, les données doivent être obtenues de manière asynchrone.
En fait, il y a un autre problème ici, qui est d'ajouter un événement click au swiper-slide De manière générale, vous ajoutez un événement onClick directement au swiper-slide p, mais le problème se pose ici. Si le carrousel peut tourner en boucle, swiper générera automatiquement deux nœuds, l'un est le premier nœud et l'autre est le dernier nœud, qui sont placés respectivement à la fin et au début pour faciliter la liaison du carrousel. Cependant, lorsqu'il a copié le nœud, il n'a pas pu copier son événement de clic onClick. Une fois l'initialisation du swiper terminée, il n'y avait pas d'événement de clic pour ces deux nœuds lorsqu'il faisait glisser le premier vers la gauche et vers la droite. à droite, puis je l'ai fait glisser à nouveau. Nous devrions donc utiliser la fonction de rappel de swiper. Transformons la méthode de construction de 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]
}
}
}
if(nowNode){
var id= nowNode.getAttribute("data-id");
var itemObj = {
id:id
}
goDetail(itemObj,self.state.myName)
return true
}
}else{
return false
}
}
},
});Copier après la connexion
L'événement de clic de swiper peut être implémenté via la méthode ci-dessus. J'ai ajouté une condition au code ci-dessus selon laquelle lorsqu'il n'y a qu'un seul nœud de carrousel de balayage, le clic sera invalide. Dans cette situation, jugez la méthode s'il n'y a qu'un seul nœud, attribuez directement le nœud 0 à nowNode. .
Il y a un point ci-dessus pour juger si le clic est sur le cercle du bas. Je l'ai posté ci-dessous pour votre référence
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;
}Copier après la connexion
Je crois que vous maîtrisez la méthode après avoir lu le cas. dans cet article. Plus excitant. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment utiliser Seajs pour écrire des conventions dans require
Comment utiliser les scopes AngularJS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
