<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關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題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關鍵字專題關鍵字專題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
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        react中使用swiper的具體方法

        來源:懂視網 責編:小采 時間:2020-11-27 22:14:44
        文檔

        react中使用swiper的具體方法

        react中使用swiper的具體方法:正文 最近的react項目需要使用輪播圖,自然而然的就想到了swiper,一直想通過npm安裝的方式來使用,但是網上找了很多,資料很少,于是就暫時通過在index.html里直接引用swiper的js和css文件的方式來加載,下面來說一下具體的步驟和使用方法。 首先說一下
        推薦度:
        導讀react中使用swiper的具體方法:正文 最近的react項目需要使用輪播圖,自然而然的就想到了swiper,一直想通過npm安裝的方式來使用,但是網上找了很多,資料很少,于是就暫時通過在index.html里直接引用swiper的js和css文件的方式來加載,下面來說一下具體的步驟和使用方法。 首先說一下

        正文

        最近的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>
         <div id="root"></div>
         <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 (
         <div>
         <div className="swiper-container" ref="lun">
         <div className="swiper-wrapper">
         <div className="swiper-slide" data-id="0">Slide 1</div>
         <div className="swiper-slide" data-id="1">Slide 2</div>
         <div className="swiper-slide" data-id="2">Slide 3</div>
         <div className="swiper-slide" data-id="3">Slide 4</div>
         <div className="swiper-slide" data-id="4">Slide 5</div>
         <div className="swiper-slide" data-id="5">Slide 6</div>
         <div className="swiper-slide" data-id="6">Slide 7</div>
         <div className="swiper-slide" data-id="7">Slide 8</div>
         <div className="swiper-slide" data-id="8">Slide 9</div>
         <div className="swiper-slide" data-id="9">Slide 10</div>
         </div>
        <div id="PgFather">
         <div className="swiper-pagination" id='body-left-pagination'></div>
        </div>
         
         </div>
         </div>
         )
         }
        }
        export default About
        
        

        如此便完成了一個輪播的實現,這里我寫的demo只是將數據寫死在了組件里,一般情況應該是通過異步來進行獲取數據。

        其實,這里還有一個問題,就在于給swiper-slide添加點擊事件,一般來說是直接給swiper-slide這個div添加一個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;
        }
        
        

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

        文檔

        react中使用swiper的具體方法

        react中使用swiper的具體方法:正文 最近的react項目需要使用輪播圖,自然而然的就想到了swiper,一直想通過npm安裝的方式來使用,但是網上找了很多,資料很少,于是就暫時通過在index.html里直接引用swiper的js和css文件的方式來加載,下面來說一下具體的步驟和使用方法。 首先說一下
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 人妻无码久久一区二区三区免费| 精品无码专区亚洲| 国产成人亚洲精品91专区高清| 91老湿机福利免费体验| 亚洲人成网7777777国产| 狠狠热精品免费观看| 日本不卡视频免费| 色老板亚洲视频免在线观| 免费福利视频导航| 亚洲欧洲无码AV电影在线观看| 一区二区视频免费观看| 亚洲国产高清精品线久久| 精品女同一区二区三区免费播放| 韩国免费三片在线视频| 亚洲精品无码mⅴ在线观看| 欧美三级在线电影免费| 亚洲国产综合人成综合网站00| 最近中文字幕高清免费中文字幕mv | AAA日本高清在线播放免费观看| 免费萌白酱国产一区二区| 日韩欧美亚洲国产精品字幕久久久 | 热久久这里是精品6免费观看| 免费一级毛片在级播放| 999久久久免费精品国产| 爽爽日本在线视频免费| 亚洲最大中文字幕无码网站| caoporn成人免费公开| 国产亚洲AV手机在线观看| a毛片全部播放免费视频完整18| 亚洲另类激情综合偷自拍图| 91在线亚洲综合在线| 免费高清资源黄网站在线观看| 色欲aⅴ亚洲情无码AV蜜桃 | 国产成人免费永久播放视频平台 | 在线免费观看a级片| 亚洲国产美女精品久久久| 久久久久亚洲AV成人网| 久爱免费观看在线网站| 亚洲av中文无码| 两个人看的www视频免费完整版| 亚洲精品免费观看|