Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation de swiper en réaction. Quelles sont les précautions pour utiliser swiper en réaction. Voici un cas pratique, jetons un 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 le chemin cdn. À ce stade, l'introduction est pratiquement terminée. L'étape suivante consiste à savoir comment l'appeler dans le composant React
Il faut dire ici que le fichier js importé ne peut pas être. directement inclus dans le composant. Pour l'utiliser, vous devez déclarer une variable au tout début. La méthode d'utilisation ultérieure est la même que la méthode d'écriture HTML ordinaire. La différence réside dans le cycle de vie . écrit. Personnellement, il est recommandé de l'écrire dans le cycle componentDidUpdate , car parfois les données sont obtenues de manière asynchrone et l'acquisition des données peut ne pas être terminée alors qu'elle vient de se terminer, l'état est mis à jour. , et le cycle de mise à jour sera déclenché à ce moment-là.
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 lors du glissement du premier vers la gauche et vers la droite. encore une fois au dernier. 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 réalisé grâce à 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 le publierai 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 :
php génère une chaîne de nombres aléatoires, de lettres ou de chiffres et de lettres mixtes
php recadre le image comme explication détaillée des étapes de taille fixe
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)
