react內(nèi)使用swiper步驟詳解

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:48:21

react內(nèi)使用swiper步驟詳解

react內(nèi)使用swiper步驟詳解:這次給大家?guī)?lái)react內(nèi)使用swiper步驟詳解，react內(nèi)使用swiper的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。正文最近的react項(xiàng)目需要使用輪播圖，自然而然的就想到了swiper，一直想通過(guò)npm安裝的方式來(lái)使用，但是網(wǎng)上找了很多，資料很少，于是就暫時(shí)通

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀react內(nèi)使用swiper步驟詳解:這次給大家?guī)?lái)react內(nèi)使用swiper步驟詳解，react內(nèi)使用swiper的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。正文最近的react項(xiàng)目需要使用輪播圖，自然而然的就想到了swiper，一直想通過(guò)npm安裝的方式來(lái)使用，但是網(wǎng)上找了很多，資料很少，于是就暫時(shí)通

這次給大家?guī)?lái)react內(nèi)使用swiper步驟詳解，react內(nèi)使用swiper的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

正文

最近的react項(xiàng)目需要使用輪播圖，自然而然的就想到了swiper，一直想通過(guò)npm安裝的方式來(lái)使用，但是網(wǎng)上找了很多，資料很少，于是就暫時(shí)通過(guò)在index.html里直接引用swiper的js和css文件的方式來(lái)加載，下面來(lái)說(shuō)一下具體的步驟和使用方法。

首先說(shuō)一下我這里使用的是swiper3x系列。接下來(lái)說(shuō)具體的步驟：

在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='%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>

當(dāng)然，我這個(gè)是將js和css文件下載到了本地，你也可以使用cdn路徑，至此，引入基本上算是引入完成了，接下來(lái)就是如何在react組件中進(jìn)行調(diào)用

在這里需要說(shuō)一下，引入的js文件在組件當(dāng)中不能直接使用，需要在最開始的位置聲明一個(gè)變量，后續(xù)的使用方法和普通的html寫法就一致了，區(qū)別就在于應(yīng)該在哪個(gè)生命周期中寫，個(gè)人建議實(shí)在componentDidUpdate周期中進(jìn)行寫，因?yàn)橛袝r(shí)候數(shù)據(jù)是異步獲取的，剛剛完成時(shí)不一定數(shù)據(jù)獲取完成，數(shù)據(jù)獲取完成以后更新state，此時(shí)會(huì)觸發(fā)update周期。

import React,{Component} from 'react'
let Swiper = window.Swiper
class About extends Component{
 constructor(props){
 super(props);
 this.state = {
 myName : "這里是about頁(yè)面",
 
 }
 }
 
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

如此便完成了一個(gè)輪播的實(shí)現(xiàn)，這里我寫的demo只是將數(shù)據(jù)寫死在了組件里，一般情況應(yīng)該是通過(guò)異步來(lái)進(jìn)行獲取數(shù)據(jù)。

其實(shí)，這里還有一個(gè)問(wèn)題，就在于給swiper-slide添加點(diǎn)擊事件，一般來(lái)說(shuō)是直接給swiper-slide這個(gè)p添加一個(gè)onClick事件，但是問(wèn)題就出現(xiàn)在了這里，若這個(gè)輪播是可以循環(huán)輪播的話，swiper會(huì)自動(dòng)生成兩個(gè)節(jié)點(diǎn)，一個(gè)是第一個(gè)節(jié)點(diǎn)，一個(gè)是最后一個(gè)節(jié)點(diǎn)，分別放置于最后和最開始，便于輪播聯(lián)動(dòng)。然而他復(fù)制節(jié)點(diǎn)的時(shí)候，無(wú)法復(fù)制其onClick的點(diǎn)擊事件，這就造成了當(dāng)swiper初始化完成以后向左滑動(dòng)第一個(gè)和向右滑動(dòng)到最后一個(gè)再滑一次這兩個(gè)節(jié)點(diǎn)是沒有點(diǎn)擊事件的。于是我們就應(yīng)該使用到swiper的回調(diào)函數(shù)了，下面我們對(duì)構(gòu)建swiper的方法進(jìn)行改造一下。

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');
//這里是判斷是否點(diǎn)擊的輪播底部圓點(diǎn)，因?yàn)榉椒ㄔ邳c(diǎn)擊圓點(diǎn)的時(shí)候也會(huì)觸發(fā)，所以為了能保證點(diǎn)擊圓點(diǎn)輪播效果，應(yīng)該將其屏蔽掉
 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
 }
 }
 },
 });

通過(guò)上面方法就可以實(shí)現(xiàn)了swiper的點(diǎn)擊事件。我上面的代碼中補(bǔ)充了一種條件就是當(dāng)swiper輪播節(jié)點(diǎn)只有一個(gè)的時(shí)候回出現(xiàn)點(diǎn)擊無(wú)效的情況，針對(duì)這一情況在方法里進(jìn)行判斷一下，如果只有一個(gè)節(jié)點(diǎn)直接將節(jié)點(diǎn)0賦值給nowNode即可。

上面有一個(gè)判斷是否點(diǎn)擊的是底部圓的點(diǎn)判斷我在下面貼出來(lái)供大家參考

isDOMContains:function(parentEle,ele,container){
 console.log(parentEle)
 //判斷一個(gè)節(jié)點(diǎn)是否是其子節(jié)點(diǎn)
 //parentEle: 要判斷節(jié)點(diǎn)的父級(jí)節(jié)點(diǎn)
 //ele:要判斷的子節(jié)點(diǎn)
 //container : 二者的父級(jí)節(jié)點(diǎn)
 //如果parentEle h和ele傳的值一樣，那么兩個(gè)節(jié)點(diǎn)相同
 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的父節(jié)點(diǎn)
 var parEle = ele.parentNode;
 while(parEle && parEle != container){
 if(parEle == parentEle){
 return true;
 }
 parEle = parEle.parentNode;
 }
 return false;
}

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

react內(nèi)使用swiper步驟詳解

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： sw React reac

熱門焦點(diǎn)

react內(nèi)使用swiper步驟詳解

react內(nèi)使用swiper步驟詳解

react內(nèi)使用swiper步驟詳解

最新推薦

猜你喜歡

熱門推薦