<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 19:44:24
        文檔

        怎樣使用react內swiper方法

        怎樣使用react內swiper方法:這次給大家帶來怎樣使用react內swiper方法,怎樣使用react內swiper方法的注意事項有哪些,下面就是實戰案例,一起來看一下。正文最近的react項目需要使用輪播圖,自然而然的就想到了swiper,一直想通過npm安裝的方式來使用,但是網上找了很多,資料很少,于是
        推薦度:
        導讀怎樣使用react內swiper方法:這次給大家帶來怎樣使用react內swiper方法,怎樣使用react內swiper方法的注意事項有哪些,下面就是實戰案例,一起來看一下。正文最近的react項目需要使用輪播圖,自然而然的就想到了swiper,一直想通過npm安裝的方式來使用,但是網上找了很多,資料很少,于是

        這次給大家帶來怎樣使用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;
        }

        相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

        推薦閱讀:

        怎樣使用seajs在require書寫約定

        怎樣使用AngularJS作用域

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

        文檔

        怎樣使用react內swiper方法

        怎樣使用react內swiper方法:這次給大家帶來怎樣使用react內swiper方法,怎樣使用react內swiper方法的注意事項有哪些,下面就是實戰案例,一起來看一下。正文最近的react項目需要使用輪播圖,自然而然的就想到了swiper,一直想通過npm安裝的方式來使用,但是網上找了很多,資料很少,于是
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 成人黄页网站免费观看大全| 一级毛片试看60分钟免费播放| 未满十八私人高清免费影院| 成人毛片18女人毛片免费96| 亚洲精品偷拍无码不卡av| 国产午夜无码精品免费看 | 无码国产精品一区二区免费16| 亚洲精品成人久久久| 麻豆va在线精品免费播放| 亚洲春黄在线观看| 亚洲精品免费在线观看| 亚洲国产综合精品中文第一区| 玖玖在线免费视频| 亚洲国产精品无码成人片久久| 中文字幕免费播放| 国产亚洲精品自在久久| 国产色爽免费无码视频| 亚洲国产精品无码专区在线观看| 成在线人视频免费视频| 亚洲日韩精品无码专区网址| a级毛片免费在线观看| 亚洲av无码国产精品色午夜字幕 | 国产99视频精品免费专区| 亚洲αv在线精品糸列| 日本中文字幕免费高清视频| 亚洲成A人片在线观看WWW| 精品一区二区三区无码免费视频 | 最近最新MV在线观看免费高清| 亚洲视频在线一区二区三区| 最近2019中文字幕免费大全5| 亚洲免费中文字幕| 在线播放免费播放av片| 狠狠热精品免费观看| 亚洲色无码专区在线观看| 免费国产黄网站在线观看视频| 亚洲视频免费在线播放| 久久久www成人免费毛片| WWW国产亚洲精品久久麻豆| 国产精品亚洲mnbav网站| 色欲色香天天天综合网站免费| 亚洲专区一路线二|