在react中 用swiper_在react中使用swiper - CSDN
  • 在react中使用swiper插件

    万次阅读 2018-08-31 14:48:03
    $npm install swiper 安装成功之后引入swiper import Swiper from 'swiper/dist/js/swiper.js' import 'swiper/dist/css/swiper.min.css' 这里引入主要是为了后期打包(build)的时候不报错 componentDidMount...
    $npm install swiper

    安装成功之后引入swiper

    import Swiper from 'swiper/dist/js/swiper.js'
    import 'swiper/dist/css/swiper.min.css'

    这里引入主要是为了后期打包(build)的时候不报错

    componentDidMount(){
        var mySwiper = new Swiper('.swiper-container', {
           slidesPerView : 3,
           spaceBetween : 20,
        })
    }
    

    引入之后我们在didmount里实例化swiper

    <div className='banner'>
        <div className='swiper-container'>
            <div className='swiper-wrapper'>
                {
                    this.state.bag.map((item,index)=>{   // this.state.bag是在state里面定义的数组为了循环数据
                        return(                                    
                            <div key={index} ref="myli" onClick={()=>this.getcommodity(index)} className=                            
                            {this.state.classId == index?this.state.arr.join(' '):"swiper-slide"}>
                            <div className={this.state.classId == index ?style.low:null}></div>
                            <div className="show">
                            <img src={item.img}></img>
                            <p>{item.title}</p>
                            </div>
                            </div>
                        )
                    })
                }
        </div>
    </div>

    之后就可以再render()里面写我们的html代码

     end:

              可能会存在很多bug,但是没有什么bug是用原生解决不了的

    javascript   is very good!

     

     

     

    展开全文
  • react 中使用 Swiper 4 做轮播图

    千次阅读 2018-10-10 14:59:23
    1. 安装 Swiper npm install --save swiper 2. 编写 Swiper 组件 首先引入 Swiper 以及样式 // 引入此路径,才不会打包失败 import Swiper from 'swiper/dist/js/swiper.js' import 'swiper/dist/css/...

    1. 安装 Swiper

    npm install --save swiper

    2. 编写 Swiper 组件

    1. 首先引入 Swiper 以及样式
    // 引入此路径,才不会打包失败
    
    import Swiper from 'swiper/dist/js/swiper.js'
    
    import 'swiper/dist/css/swiper.min.css'
    1. 在组件挂载完毕的时候生成 Swiper 对象
    componentDidMount () {
        
          var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,
            loop: true,
            pagination : {
                el: '.swiper-pagination',
            }
          });
    }

     

    2 . 在 React 的 render 方法构造 html 结构

    render() {
        return (
          <div className="App">
            <div className="swiper-container">
            <div className="swiper-wrapper">
              <div className="swiper-slide">Slide 1</div>
              <div className="swiper-slide">Slide 2</div>
              <div className="swiper-slide">Slide 3</div>
            </div>
            <div className='swiper-pagination'></div>
          </div>
          </div>
        );
      }
    }

    这样就可以了

    展开全文
  • react中使用swiper

    2019-02-28 05:17:37
    最近的react项目需要使用轮播图,自然而然的就想到了swiper,一直想通过npm安装的方式来使用,但是网上找了很多,资料很少,于是就暂时通过index.html里直接引用swiper的js和css文件的方式来加载,下面来说一下...

    前言

    欢迎大家访问我的博客OECOM,与我一起探讨前端。

    正文

    最近的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">
        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
          <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;
    }
    复制代码
    展开全文
  • React中使用swiper的具体方法

    千次阅读 2019-02-28 17:25:17
    最近的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页面",   
     }/欢迎加入全栈开发交流圈一起学习交流:864305860
     }  
    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,
          },
         });//欢迎加入全栈开发交流圈一起学习交流:864305860
     }
    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>//欢迎加入全栈开发交流圈一起学习交流:864305860
    <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]
             }//欢迎加入全栈开发交流圈一起学习交流:864305860
            }//面向1-3年前端人员
           }//帮助突破技术瓶颈,提升思维能力
           if(nowNode){
            var id= nowNode.getAttribute("data-id");
            var itemObj = {
             id:id
            }
            goDetail(itemObj,self.state.myName)
            return true
           }
          }else{
           return false
          }
        }//欢迎加入全栈开发交流圈一起学习交流:864305860
          },//面向1-3年前端人员
         });//帮助突破技术瓶颈,提升思维能力
    复制代码

    通过上面方法就可以实现了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;
     }//欢迎加入全栈开发交流圈一起学习交流:864305860
     //如果浏览器支持contains
     if(parentEle.contains){
      return parentEle.contains(ele)
     }//欢迎加入全栈开发交流圈一起学习交流:864305860
     //火狐支持
     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;
     }//欢迎加入全栈开发交流圈一起学习交流:864305860
     return false;
    }
    复制代码

    结语

    感谢您的观看,如有不足之处,欢迎批评指正。

    本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

    展开全文
  • react 引入swiper

    2019-08-13 15:02:39
    npm install --save swiper 应用模块引入import 'swiper/dist/css/swiper.min.css' import Swiper from 'swiper' 转载于:https://www.cnblogs.com/dianzan/p/11027409.html
  • react-native 轮播图 ——react-native-swiper使用

    万次阅读 热门讨论 2017-08-18 11:45:18
    Native-Viewpager 两种封装的比较好的第三方组件,对比了下文档,觉得react-native-swiper功能更加完善,而且文档说明比较全面,所以只用了react-native-swiper,下面介绍下react-native-swiper使用。该组件同时...
  • 手把手教你 react 中使用 Swiper 4 做轮播图
  • 在React中使用Swiper做触摸内容滑动 缘由 实现一个触摸内容滑动的功能的时候,想reactJS该怎么处理呢,然后被提点用Swiper可以,一想确实可以。。。。于是开始敲了,了网上的一些用在react里面的Swiper,但是并...
  • 2.下载完成之后,想要使用的页面引入swiper import Swiper from "swiper" 同时还要将swiper的样式进行引入,我当时搜索网上的都是将css和swiper在同一个页面进行引用,但是我的页面是没有进行引入的,或者说...
  • react中使用swiper插件

    2019-11-12 11:14:43
    最近react的demo,遇到了需要滑动的功能,引入了swiper,但是引入的时候一直报错 安装的时候是这样的 npm install swiper 网上查的是这样引入的 import Swiper from 'swiper/dist/js/swiper.js' import '...
  • 找了好久,最后发现问题,每个swiper-slide元素的宽度是750.4px,而每次轮播图滑动时transformX轴方向移动的距离是734px,让我联想到了vue中使用swiper插件使用了 就是组件挂载完成时,会等css...
  • react中如何使用swiper

    2019-10-01 14:17:00
    react中怎么使用基本swiper  第一步:安装包 npm i swiper -S  第二步:引包 import Swiper from 'swiper/dist/js/swiper.js' import 'swiper/dist/css/swiper.css'  第三步:写html <...
  • React 项目使用Swiper

    2019-10-12 10:20:22
    React 项目中使用Swiper,包括解决build打包失败,如何销毁Swiper的问题
  • 一、使用Swiper 1、项目入口文件index.js引入样式 import ‘swiper/dist/css/swiper.css’ 2、按需使用html结构 3、初始化swiper componentDidUpdate()钩子写入初始化js代码 (不要忘记import Swiper from ...
  • 以下是app.jsx里的swiper   &lt;div className="swiper-container App-swiper"&gt; &lt;div className="swiper-wrapper"&gt; &lt;div className="swiper-slide...
  • react中swiper的配置(纯swiper篇) 本次的swiper的配置基于3.4.2版本的swiper包 本篇博客可以有效解决配置的swiper不轮播,不自动轮播问题 1、首先安装swiper3.4.2版本 npm i swiper@3.4.2 -s 这时候你会发现你的...
  • 基于react脚手架使用swiper 官方地址:swiper官方API文档 安装:npm i swiper -S 引入js和css样式:(地址不对就自行去node_modules里找swiper文件夹,修改到相应的css路径) import Swiper from 'swiper'; import '...
  • React 中使用 swiper 插件

    千次阅读 2018-09-13 15:18:52
    安装 Swiper npm install --save swiper 编写 Swiper 组件 1,首先引入 Swiper 以及样式 // 引入此路径,才不会打包失败 import Swiper from 'swiper/dist/js/swiper....2,组件挂载完毕的时候生成 Swiper 对象...
  • React中如何引用swiper插件

    千次阅读 2019-04-12 19:16:19
    1、安装 npm install swiper 2、引入js和css // 引入此路径,才不会打包失败 import Swiper from ‘swiper/dist/js/swiper.js’ ...3、组件挂载完毕的时候生成 Swiper 对象 componentDidMount(){ new Swiper...
  • React中reactjs-swiper使用与入坑 React中reactjs-swiper使用与入坑 本文最先参考了https://www.cnblogs.com/cbp-jltx/p/9681838.html 但是,也不知道什么原因,swiperOptions始终不起作用,不知道是不是我自己...
1 2 3 4 5 ... 20
收藏数 2,715
精华内容 1,086
关键字:

在react中 用swiper