ホームページ > 記事 > ウェブフロントエンド > Reactでスワイパーメソッドを使用する方法
Reactでスワイパーメソッドを使用する方法
- php中世界最好的语言オリジナル
- 2018-05-29 14:52:562133ブラウズ
今回は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='%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>
もちろん、js ファイルと css ファイルをローカルにダウンロードしました。この時点では、cdn パスを使用することもできます。基本的には導入が完了しました。次のステップは、react コンポーネント内でそれを呼び出す方法です
ここで、インポートされた 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='body-left-pagination'></p>
</p>
</p>
</p>
)
}
}
export default About
これでカルーセルの実装が完了しました。ここで書いたデモは、データをコンポーネントに書き込むだけです。一般に、データは非同期で取得される必要があります。
実際には、ここで別の問題があります。それは、swiper-slide に click イベントを追加することです。一般的に、onClick イベントを swiper-slide の p に直接追加しますが、ここで問題が発生します。カルーセルがループされると、スワイパーは 2 つのノードを自動的に生成します。1 つは最初のノード、もう 1 つは最後のノードです。これらは、カルーセルのリンクを容易にするために、それぞれ最後と先頭に配置されます。ただし、ノードをコピーしたときに、その onClick クリック イベントをコピーできませんでした。これにより、スワイパーの初期化が完了した後、最初のノードを左にスライドさせてから、次のノードにスライドさせたときに、これら 2 つのノードのクリック イベントが発生しませんでした。右に移動してから、もう一度スライドさせます。そこで、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
}
}
},
});
上記の方法でスワイパーのクリックイベントが実現できます。上記のコードに、スワイパーカルーセルノードが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 サイトの他の関連記事にも注目してください。
推奨読書:
以上がReactでスワイパーメソッドを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。