react內使用swiper步驟詳解
這次帶給大家react內使用swiper步驟詳解，react內使用swiper的注意事項有哪些，下面就是實戰案例，一起來看一下。
正文
最近的react專案需要使用輪播圖，自然而然的就想到了swiper，一直想透過npm安裝的方式來使用，但是網路上找了很多，資料很少，於是就暫時透過在index.html裡直接引用swiper的js和css檔案的方式來加載，下面來說一下具體的步驟和使用方法。
先說一下我這裡使用的是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='%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週期中進行寫，因為有時候資料是非同步取得的，剛完成時不一定資料取得完成，資料取得完成以後更新state，此時會觸發update週期。
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如此便完成了一個輪播的實現，這裡我寫的demo只是將資料寫死在了組件裡，一般情況應該是透過非同步來進行獲取資料。
其實，這裡還有一個問題，就在於給swiper-slide添加點擊事件，一般來說是直接給swiper-slide這個p添加一個onClick事件，但是問題就出現在了這裡，若這個輪播是可以循環輪播的話，swiper會自動產生兩個節點，一個是第一個節點，一個是最後一個節點，分別放置於最後和最開始，以便於輪播連動。然而他複製節點的時候，無法複製其onClick的點擊事件，這就造成了當swiper初始化完成以後向左滑動第一個和向右滑動到最後一個再滑一次這兩個節點是沒有點擊事件的。於是我們就應該使用到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的點擊事件。我上面的程式碼補充了一種條件就是當swiper輪播節點只有一個的時候回出現點擊無效的情況，針對這一情況在方法裡進行判斷一下，如果只有一個節點直接將節點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中文網其它相關文章！
推薦閱讀：
#以上是react內使用swiper步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11管理員權限取得詳解
Mar 08, 2024 pm 03:06 PM
Windows作業系統是全球最受歡迎的作業系統之一，其新版本Win11備受矚目。在Win11系統中，管理員權限的取得是一個重要的操作，管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限，以及如何有效地管理權限。在Win11系統中，管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限
Oracle SQL中的除法運算詳解
Mar 10, 2024 am 09:51 AM
OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算
PHP、Vue和React：如何選擇最適合的前端框架？
Mar 15, 2024 pm 05:48 PM
PHP、Vue和React：如何選擇最適合的前端框架？隨著互聯網技術的不斷發展，前端框架在Web開發中起著至關重要的作用。 PHP、Vue和React作為三種代表性的前端框架，每一種都具有其獨特的特徵和優勢。在選擇使用哪種前端框架時，開發人員需要根據專案需求、團隊技能和個人偏好做出明智的決策。本文將透過比較PHP、Vue和React這三種前端框架的特徵和使
Java框架與前端React框架的整合
Jun 01, 2024 pm 03:16 PM
Java框架與React框架的整合：步驟：設定後端Java框架。建立專案結構。配置建置工具。建立React應用程式。編寫RESTAPI端點。配置通訊機制。實戰案例（SpringBoot+React）：Java程式碼：定義RESTfulAPI控制器。 React程式碼：取得並顯示API回傳的資料。
PHP模運算子的作用及用法詳解
Mar 19, 2024 pm 04:33 PM
PHP中的模運算子（%）是用來取得兩個數值相除的餘數的。在本文中，我們將詳細討論模運算子的作用及用法，並提供具體的程式碼範例來幫助讀者更好地理解。 1.模運算子的作用在數學中，當我們將一個整數除以另一個整數時，就會得到一個商和一個餘數。例如，當我們將10除以3時，商數為3，餘數為1。模運算子就是用來取得這個餘數的。 2.模運算子的用法在PHP中，使用%符號來表示模
vue.js vs.反應：特定於項目的考慮因素
Apr 09, 2025 am 12:01 AM
Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。
React在HTML中的作用：增強用戶體驗
Apr 09, 2025 am 12:11 AM
React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。
黑鯊手機隱藏應用的操作方法詳解
Mar 24, 2024 pm 12:09 PM
黑鯊手機隱藏應用的操作方法詳解隨著手機功能的不斷完善，現代人對於手機的需求也越來越多樣化。有些人可能會在手機中保存一些私密的資訊或是個人照片，為了保護隱私安全，許多手機都提供了隱藏應用的功能。黑鯊手機作為一款專為遊戲玩家設計的手機，也為使用者提供了隱藏應用的功能。以下就來詳細介紹黑鯊手機隱藏應用的操作方法。第一步：開啟「設定」介面首先，使用者需要打開黑鯊手
