집 > 기사 > 웹 프론트엔드 > 반응에서 스와이퍼를 사용하는 단계에 대한 자세한 설명

반응에서 스와이퍼를 사용하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-21 13:51:262610검색

이번에는 React에서 Swiper를 사용하는 단계에 대해 자세히 설명하겠습니다. Swiper를 React에서 사용할 때 주의사항은 무엇인가요?

Text

최근 리액트 프로젝트에서는 캐러셀 이미지를 사용해야 하는데 당연히 npm 설치를 통해서 사용하고 싶었는데 인터넷에서 많이 찾았고 정보가 거의 없었거든요. 그래서 임시로 사용했습니다. swiper의 js 및 css 파일을 index.html에 직접 로드합니다. 구체적인 단계와 사용법은 다음과 같습니다.

우선 여기서는 swiper3x 시리즈를 사용하고 있습니다. 다음으로 구체적인 단계에 대해 이야기하겠습니다.

index.html에 js 및 css 파일 추가

<!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>

물론 js 및 css 파일을 로컬로 다운로드했습니다. 이 시점에서 cdn 경로를 사용할 수도 있습니다. 소개는 기본적으로 소개가 완료되었으니 다음 단계는 리액트 컴포넌트에서 호출하는 방법입니다

가져온 js 파일은 컴포넌트에서 직접 사용할 수 없다는 점을 여기서 언급해야 합니다. 이후 사용방법은 일반과 동일합니다. html 작성방법은 동일합니다. 차이점은 lifecycle을 어떻게 작성해야 하는지 입니다. 개인적으로는 데이터가 가끔 ComponentDidUpdate주기에 작성되는 것을 권장합니다. 비동기적으로 획득되며, 데이터 획득이 완료되면 데이터 획득이 완료되지 않을 수 있습니다. 나중에 상태가 업데이트되면 업데이트 주기가 트리거됩니다.

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

여기서 작성한 데모는 일반적으로 데이터를 비동기식으로 가져와야 합니다.

사실 여기에 또 다른 문제가 있습니다. swiper-slide에 클릭 이벤트를 추가하는 것입니다. 일반적으로 swiper-slide의 p에 onClick 이벤트를 직접 추가하지만, 이 캐러셀이 가능하다면 여기서 문제가 발생합니다. 캐러셀이 반복되면 swiper는 두 개의 노드를 자동으로 생성합니다. 하나는 첫 번째 노드이고 다른 하나는 마지막 노드이며 캐러셀 연결을 용이하게 하기 위해 각각 끝과 시작에 배치됩니다. 그러나 노드를 복사할 때 onClick 클릭 이벤트를 복사할 수 없었습니다. 이로 인해 스와이프 초기화가 완료된 후 첫 번째 노드를 왼쪽으로 밀고 노드로 밀 때 이 두 노드에 대한 클릭 이벤트가 발생하지 않았습니다. 맞고 다시 미끄러졌습니다. 그럼 swiper의 콜백 함수를 활용해 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
      }
    }
      },
     });

위 방법을 통해 스와이퍼의 클릭 이벤트를 구현할 수 있습니다. 위의 코드에 swiper carousel 노드가 1개만 있을 경우 클릭이 무효가 된다는 조건을 추가했는데, 이 상황에서는 노드가 1개만 있으면 node 0을 nowNode에 직접 할당할 수 있습니다. .

클릭이 하단 원에 있는지 판단하는 포인트가 상단에 있습니다. 참고용으로 아래에 게시하겠습니다.

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

더 흥미로운 정보는 이 기사의 사례를 읽으신 후 방법을 익히셨을 것입니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!