Home >Web Front-end >JS Tutorial >Detailed explanation of steps to use swiper in react

Detailed explanation of steps to use swiper in react

php中世界最好的语言Original: 2018-05-21 13:51:262654browse

This time I will give you a detailed explanation of the steps for using swiper in react. What are the precautions for using swiper in react? Here are the actual cases, let’s take a look.

Text

Recent react projects need to use carousel images, so naturally I thought of swiper, and I have always wanted to install it through npm I used it, but I found a lot on the Internet and there was very little information, so I temporarily loaded it by directly referencing swiper's js and css files in index.html. Let's talk about the specific steps and usage.

First of all, I am using the swiper3x series here. Next, let’s talk about the specific steps:

Introduce js and css files into 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=&#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>

Of course, I downloaded the js and css

files locally. You can also use the cdn path. At this point, the import is basically completed. The next step is how to call it in the react component.

It needs to be mentioned here that the imported js file cannot be used directly in the component. You need to declare a variable at the very beginning. The subsequent usage method is the same as the ordinary html writing method. The difference lies in which

lifecycle it should be written in. Personally, it is recommended to write it in the componentDidUpdate cycle, because Sometimes the data is obtained asynchronously, and the data acquisition may not be completed when it is just completed. After the data acquisition is completed, the state is updated, and the update cycle is triggered at this time.

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

This completes the implementation of a carousel. The demo I wrote here only writes the data into the component. In general, the data should be obtained asynchronously.

Actually, there is another problem here, which is to add a click event to swiper-slide. Generally speaking, you add an onClick event directly to the p of swiper-slide, but the problem arises here. If this If the carousel can be rotated in a loop, swiper will automatically generate two nodes, one is the first node and the other is the last node, which are placed at the end and the beginning respectively to facilitate carousel linkage. However, when he copied the node, he could not copy its onClick click event. This caused that after the swiper initialization was completed, there was no click event for these two nodes when sliding the first one to the left and sliding it to the right and then sliding it again. So we should use swiper's

callback function. Let's transform the method of building 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
      }
    }
      },
     });

The click event of swiper can be realized through the above method. I added a condition to the code above that when there is only one swiper carousel node, the click will be invalid. For this situation, make a judgment in the method. If there is only one node, directly assign node 0 to nowNode. Can.

There is a point to judge whether the click is on the bottom circle. I will post it below for your reference.

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

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Detailed explanation of steps to use swiper in react

Related articles