react中使用swiper的具体方法


Posted in Javascript onMay 15, 2018

正文

最近的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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
JavaScript 语言的递归编程
May 18 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
jQuery事件用法详解
Oct 06 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
深入理解Vue Computed计算属性原理
May 29 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 #Javascript
浅谈AngularJS中$http服务的简单用法
May 15 #Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 #Javascript
解决linux下node.js全局模块找不到的问题
May 15 #Javascript
vue :src 文件路径错误问题的解决方法
May 15 #Javascript
利用npm 安装删除模块的方法
May 15 #Javascript
vux uploader 图片上传组件的安装使用方法
May 15 #Javascript
You might like
PHP递归删除目录几个代码实例
2014/04/21 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
jquery轮播图插件使用方法详解
2020/07/31 jQuery
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
Python中多线程及程序锁浅析
2015/01/21 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
Python装饰器语法糖
2019/01/02 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
支教自我鉴定
2014/01/18 职场文书
干部现实表现材料
2014/02/13 职场文书
汉语言文学职业规划
2014/02/14 职场文书
买房委托公证书
2014/04/08 职场文书
文明村镇申报材料
2014/05/06 职场文书
垃圾桶标语
2014/06/24 职场文书
转让协议书范本
2014/09/13 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python