집 > 기사 > 웹 프론트엔드 > 반응에서 스와이퍼 방법을 사용하는 방법

반응에서 스와이퍼 방법을 사용하는 방법

php中世界最好的语言원래의: 2018-05-29 14:52:562134검색

이번에는 React에서 Swiper 방식을 사용하는 방법과 React에서 Swiper 방식을 사용하는 방법에 대한 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

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 파일을 로컬로 다운로드할 수도 있습니다. 이 시점에서 소개는 다음과 같습니다. 기본적으로 소개가 완료되었습니다. 다음 단계는 반응 구성 요소에서 호출하는 방법입니다.

여기서는 가져온 js 파일을 구성 요소에서 직접 사용할 수 없다는 점을 처음에 선언해야 합니다. 사용법은 일반 html과 동일합니다. 작성방법은 동일합니다. 어느 라이프사이클에 작성해야 하는지 차이가 있습니다. 개인적으로는 비동기적으로 데이터를 가져오는 경우도 있기 때문에, 개인적으로는 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 중국어 웹사이트의 다른 관련 기사도 주목해주세요!