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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
js arguments对象应用介绍
Nov 28 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 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提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
js操作二进制数据方法
2018/03/03 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python下Fabric的简单部署方法
2015/07/14 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
pytorch masked_fill报错的解决
2020/02/18 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
毕业自我鉴定
2013/11/05 职场文书
前处理组长岗位职责
2014/03/01 职场文书
个人工作主要事迹
2014/05/08 职场文书
运动会的口号
2014/06/09 职场文书
产品调价通知函
2015/04/20 职场文书
学校运动会加油词
2015/07/18 职场文书
敬老院活动感想
2015/08/07 职场文书