正文
創(chuàng)新互聯(lián)建站長期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為凌海企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、成都網(wǎng)站制作，凌海網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
最近的react項目需要使用輪播圖，自然而然的就想到了swiper，一直想通過npm安裝的方式來使用，但是網(wǎng)上找了很多，資料很少，于是就暫時通過在index.html里直接引用swiper的js和css文件的方式來加載，下面來說一下具體的步驟和使用方法。
首先說一下我這里使用的是swiper3x系列。接下來說具體的步驟：
在index.html中引入js和css文件
React App
當(dāng)然，我這個是將js和css文件下載到了本地，你也可以使用cdn路徑，至此，引入基本上算是引入完成了，接下來就是如何在react組件中進(jìn)行調(diào)用
在這里需要說一下，引入的js文件在組件當(dāng)中不能直接使用，需要在最開始的位置聲明一個變量，后續(xù)的使用方法和普通的html寫法就一致了，區(qū)別就在于應(yīng)該在哪個生命周期中寫，個人建議實在componentDidUpdate周期中進(jìn)行寫，因為有時候數(shù)據(jù)是異步獲取的，剛剛完成時不一定數(shù)據(jù)獲取完成，數(shù)據(jù)獲取完成以后更新state，此時會觸發(fā)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 (
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
)
}
}
export default About
如此便完成了一個輪播的實現(xiàn)，這里我寫的demo只是將數(shù)據(jù)寫死在了組件里，一般情況應(yīng)該是通過異步來進(jìn)行獲取數(shù)據(jù)。
其實，這里還有一個問題，就在于給swiper-slide添加點擊事件，一般來說是直接給swiper-slide這個div添加一個onClick事件，但是問題就出現(xiàn)在了這里，若這個輪播是可以循環(huán)輪播的話，swiper會自動生成兩個節(jié)點，一個是第一個節(jié)點，一個是最后一個節(jié)點，分別放置于最后和最開始，便于輪播聯(lián)動。然而他復(fù)制節(jié)點的時候，無法復(fù)制其onClick的點擊事件，這就造成了當(dāng)swiper初始化完成以后向左滑動第一個和向右滑動到最后一個再滑一次這兩個節(jié)點是沒有點擊事件的。于是我們就應(yīng)該使用到swiper的回調(diào)函數(shù)了，下面我們對構(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');
//這里是判斷是否點擊的輪播底部圓點，因為方法在點擊圓點的時候也會觸發(fā)，所以為了能保證點擊圓點輪播效果，應(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通過上面方法就可以實現(xiàn)了swiper的點擊事件。我上面的代碼中補充了一種條件就是當(dāng)swiper輪播節(jié)點只有一個的時候回出現(xiàn)點擊無效的情況，針對這一情況在方法里進(jìn)行判斷一下，如果只有一個節(jié)點直接將節(jié)點0賦值給nowNode即可。
上面有一個判斷是否點擊的是底部圓的點判斷我在下面貼出來供大家參考
isDOMContains:function(parentEle,ele,container){
console.log(parentEle)
//判斷一個節(jié)點是否是其子節(jié)點
//parentEle: 要判斷節(jié)點的父級節(jié)點
//ele:要判斷的子節(jié)點
//container : 二者的父級節(jié)點
//如果parentEle h和ele傳的值一樣，那么兩個節(jié)點相同
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é)點
var parEle = ele.parentNode;
while(parEle && parEle != container){
if(parEle == parentEle){
return true;
}
parEle = parEle.parentNode;
}
return false;
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
