react内使用swiper步骤详解-js教程-PHP中文网

首页

web前端

js教程

react内使用swiper步骤详解

php中世界最好的语言

May 21, 2018 pm 01:51 PM

react swiper 详解

这次给大家带来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=&#39;%PUBLIC_URL%/static/css/swiper.min.css&#39;>
 
  <title>React App</title>
 </head>
 <body>
  <p id="root"></p>
  <script src=&#39;%PUBLIC_URL%/static/js/swiper.min.js&#39;></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=&#39;body-left-pagination&#39;></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;
}

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1657

CakePHP 教程

1415

Laravel 教程

1309

PHP教程

1257

C# 教程

1229

显示更多

Related knowledge

PHP、Vue和React：如何选择最适合的前端框架？ Mar 15, 2024 pm 05:48 PM

PHP、Vue和React：如何选择最适合的前端框架？随着互联网技术的不断发展，前端框架在Web开发中起着至关重要的作用。PHP、Vue和React作为三种具有代表性的前端框架，每一种都具有其独特的特点和优势。在选择使用哪种前端框架时，开发人员需要根据项目需求、团队技能和个人偏好做出明智的决策。本文将通过比较PHP、Vue和React这三种前端框架的特点和使

PHP模运算符的作用及用法详解 Mar 19, 2024 pm 04:33 PM

PHP中的模运算符（%）是用来获取两个数值相除的余数的。在本文中，我们将详细讨论模运算符的作用及用法，并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中，当我们将一个整数除以另一个整数时，会得到一个商和一个余数。例如，当我们将10除以3时，商为3，余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中，使用%符号来表示模

Java框架与前端React框架的整合 Jun 01, 2024 pm 03:16 PM

Java框架与React框架的整合：步骤：设置后端Java框架。创建项目结构。配置构建工具。创建React应用。编写RESTAPI端点。配置通信机制。实战案例（SpringBoot+React）：Java代码：定义RESTfulAPI控制器。React代码：获取并显示API返回的数据。

vue.js vs.反应：特定于项目的考虑因素 Apr 09, 2025 am 12:01 AM

Vue.js适合中小型项目和快速迭代，React适用于大型复杂应用。1)Vue.js易于上手，适用于团队经验不足或项目规模较小的情况。2)React的生态系统更丰富，适合有高性能需求和复杂功能需求的项目。

React在HTML中的作用：增强用户体验 Apr 09, 2025 am 12:11 AM

React通过JSX与HTML结合，提升用户体验。1)JSX嵌入HTML，使开发更直观。2)虚拟DOM机制优化性能，减少DOM操作。3)组件化管理UI，提高可维护性。4)状态管理和事件处理增强交互性。

Go语言内存管理详解 Mar 28, 2024 am 09:18 AM

Go语言内存管理详解Go语言作为一种现代化的编程语言，自带了垃圾回收器，这使得开发者无需手动管理内存，极大地简化了内存管理的复杂度。本文将详细介绍Go语言的内存管理机制，并通过具体的代码示例来说明。内存管理原理Go语言的内存管理主要依靠垃圾回收器来进行自动内存回收。垃圾回收器（GarbageCollector）会定期检查程序中不再使用的内存块，并将其回收，

黑鲨手机隐藏应用的操作方法详解 Mar 24, 2024 pm 12:09 PM

黑鲨手机隐藏应用的操作方法详解随着手机功能的不断完善，现代人对于手机的需求也越来越多样化。有些人在手机中可能会保存一些私密的信息或者是个人照片，为了保护隐私安全，很多手机都提供了隐藏应用的功能。黑鲨手机作为一款专为游戏玩家设计的手机，也为用户提供了隐藏应用的功能。下面就来详细介绍一下黑鲨手机隐藏应用的操作方法。第一步：打开“设置”界面首先，用户需要打开黑鲨手

React与Vue：Netflix使用哪个框架？ Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVueDirectly.1）TeamExperience：selectBasedAsedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects，vueforsimplerprojects，reactforforforecomplexones.3）cocatizationNeedsneeds：reactofficatizationneedneeds：reactofferizationneedneedneedneeds：reactoffersizatization needeffersefersmoreflexiblesimore.4）ecosyaka

See all articles

react内使用swiper步骤详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题