<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

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

        來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 19:48:21
        文檔

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

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

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

        正文

        最近的react項(xiàng)目需要使用輪播圖,自然而然的就想到了swiper,一直想通過npm安裝的方式來使用,但是網(wǎng)上找了很多,資料很少,于是就暫時通過在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>

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

        在這里需要說一下,引入的js文件在組件當(dāng)中不能直接使用,需要在最開始的位置聲明一個變量,后續(xù)的使用方法和普通的html寫法就一致了,區(qū)別就在于應(yīng)該在哪個生命周期中寫,個人建議實(shí)在componentDidUpdate周期中進(jìn)行寫,因?yàn)橛袝r候數(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 (
         <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

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

        其實(shí),這里還有一個問題,就在于給swiper-slide添加點(diǎn)擊事件,一般來說是直接給swiper-slide這個p添加一個onClick事件,但是問題就出現(xiàn)在了這里,若這個輪播是可以循環(huán)輪播的話,swiper會自動生成兩個節(jié)點(diǎn),一個是第一個節(jié)點(diǎn),一個是最后一個節(jié)點(diǎn),分別放置于最后和最開始,便于輪播聯(lián)動。然而他復(fù)制節(jié)點(diǎn)的時候,無法復(fù)制其onClick的點(diǎn)擊事件,這就造成了當(dāng)swiper初始化完成以后向左滑動第一個和向右滑動到最后一個再滑一次這兩個節(jié)點(diǎn)是沒有點(diǎn)擊事件的。于是我們就應(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');
        //這里是判斷是否點(diǎn)擊的輪播底部圓點(diǎn),因?yàn)榉椒ㄔ邳c(diǎn)擊圓點(diǎn)的時候也會觸發(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
         }
         }
         },
         });

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

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

        isDOMContains:function(parentEle,ele,container){
         console.log(parentEle)
         //判斷一個節(jié)點(diǎn)是否是其子節(jié)點(diǎn)
         //parentEle: 要判斷節(jié)點(diǎn)的父級節(jié)點(diǎn)
         //ele:要判斷的子節(jié)點(diǎn)
         //container : 二者的父級節(jié)點(diǎn)
         //如果parentEle h和ele傳的值一樣,那么兩個節(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)掌握了方法,更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章!

        推薦閱讀:

        php生成隨機(jī)數(shù)字、字母或數(shù)字字母混合的字符串

        php裁剪圖片為固定大小步驟詳解

        聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

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

        react內(nèi)使用swiper步驟詳解:這次給大家?guī)韗eact內(nèi)使用swiper步驟詳解,react內(nèi)使用swiper的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來看一下。正文最近的react項(xiàng)目需要使用輪播圖,自然而然的就想到了swiper,一直想通過npm安裝的方式來使用,但是網(wǎng)上找了很多,資料很少,于是就暫時通
        推薦度:
        標(biāo)簽: sw React reac
        • 熱門焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 四虎成人精品一区二区免费网站| 亚洲一级毛片中文字幕| 视频免费在线观看| 美女被免费喷白浆视频| 2020国产精品亚洲综合网| 国产精品免费播放| 中文字幕免费在线观看动作大片| 成年女人永久免费观看片| 免费看一级一级人妻片| 国产精一品亚洲二区在线播放| 最近高清中文字幕免费| 亚洲国产精品无码久久| 国产av无码专区亚洲av果冻传媒 | 一级毛片试看60分钟免费播放 | 亚洲人成电影网站| 日韩精品无码免费一区二区三区 | 亚洲国产精品尤物yw在线| 亚洲熟伦熟女专区hd高清| 免费A级毛片无码无遮挡内射| 亚洲国产AV无码一区二区三区| 浮力影院亚洲国产第一页| 亚洲电影在线免费观看| 特级aaaaaaaaa毛片免费视频| 国产免费久久精品| 免费在线看黄网站| 一本久到久久亚洲综合| 亚洲av日韩专区在线观看| 国产精品高清全国免费观看| 91福利免费网站在线观看| 亚洲精品国产国语| 亚洲精品V欧洲精品V日韩精品| 成人人免费夜夜视频观看| 国产午夜精品免费一区二区三区| 亚洲欧美日韩中文无线码| 久久久久亚洲AV成人无码| 又黄又爽的视频免费看| 免费播放国产性色生活片| 欧洲人成在线免费| 亚洲人成色4444在线观看| 亚洲av无码一区二区三区不卡 | 亚洲国产专区一区|