Reactでスワイパーを使用する手順の詳細な説明-jsチュートリアル-php.cn

Reactでスワイパーを使用する手順の詳細な説明

php中世界最好的语言

リリース： 2018-05-21 13:51:26

オリジナル

2651 人が閲覧しました

今回はreactでswiperを使用する手順について詳しく説明します。reactでswiperを使用する際の注意点を実際のケースを見てみましょう。

Text

最近の反応プロジェクトではカルーセル画像を使用する必要があるので、npm インストールを通じて使用したいと常に考えていましたが、インターネット上でたくさん見つかりました。という情報があったので、暫定的にswiperのjsファイルとcssファイルをindex.htmlに読み込みました。具体的な手順と使い方を記載します。

まず、ここではswiper3xシリーズを使用しています。次に、具体的な手順について説明します。

js および css ファイルを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>

ログイン後にコピー

もちろん、js および css ファイルをローカルにダウンロードしました。この時点で、cdn パスを使用することもできます。導入は基本的にです導入が完了したので、次のステップは反応コンポーネント内でそれを呼び出す方法です

ここで、インポートされた js ファイルをコンポーネント内で直接使用できないことを言及する必要があります。で変数を宣言する必要があります。以降の使用方法は通常と同じです。 HTMLの記述方法は同じです。違いは

ライフサイクルをどこに書くかです。は非同期で取得されるため、データ取得が完了したばかりでは完了しない可能性があります。将来、状態が更新されると、更新サイクルがトリガーされます。

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 に click イベントを追加することです。一般的に、onClick イベントを swiper-slide の p に直接追加しますが、ここで問題が発生します。カルーセルがループされると、スワイパーは 2 つのノードを自動的に生成します。1 つは最初のノード、もう 1 つは最後のノードです。これらは、カルーセルのリンクを容易にするために、それぞれ最後と先頭に配置されます。ただし、ノードをコピーしたときに、その onClick クリックイベントをコピーできませんでした。これにより、スワイパーの初期化が完了した後、最初のノードを左にスライドさせてから、次のノードにスライドさせたときに、これら 2 つのノードのクリックイベントが発生しませんでした。右に移動してから、もう一度スライドさせます。そこで、スワイパーの

コールバック関数を使用する必要があります。スワイパーの構築方法を変更しましょう。

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

ログイン後にコピー

上記の方法でスワイパーのクリックイベントが実現できます。上記のコードに、スワイパーカルーセルノードが1つしかない場合はクリックが無効になるという条件を追加しました。この場合、ノードが1つしかない場合は、ノード0を直接Canに割り当てます。。

クリックが下の円にあるかどうかを判断するためのポイントが上部にありますので、ご参考までに以下に掲載します

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 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

phpは、乱数、文字、または数字と文字の混合文字列を生成します

php画像を固定サイズにトリミングする詳細な手順

以上がReactでスワイパーを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。