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> <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-native封装插件swiper的使用方法
相关推荐
-
react-native封装插件swiper的使用方法
首先创建简单的react-native项目,创建一个文件夹.然后用命令符输入 react-native init swiper 创建完成之后开发项目,我用的vs 打开控制台,安装swiper依赖. 安装:npm i react-native-swiper --save 查看:npm view react-native-swiper 删除:npm rm react-native-swiper --save 这里还需要 npm i 下更新下本地的依赖库 启动app项目 ios: react-nati
-
react中使用swiper的具体方法
正文 最近的react项目需要使用轮播图,自然而然的就想到了swiper,一直想通过npm安装的方式来使用,但是网上找了很多,资料很少,于是就暂时通过在index.html里直接引用swiper的js和css文件的方式来加载,下面来说一下具体的步骤和使用方法. 首先说一下我这里使用的是swiper3x系列.接下来说具体的步骤: 在index.html中引入js和css文件 <!DOCTYPE html> <html lang="en"> <head>
-
React中使用antd组件的方法
目录 antd 使用antd antd antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品. 国内镜像为:https://ant-design.gitee.io/docs/react/introduce-cn速度很快 进入网页点击组件就可以看到网页需要的各种配件,如按钮.导航栏等等,并且配有各种使用方法的API,目前已经更新到4.22版本,原本是只支持react不过后来也支持vue了.3.几版本的文档说明会更加详细antd还可以更改主题颜色
-
React中jquery引用的实现方法
在React中引用Jquery比较好玩,获取元素的数据更多 1.引入方法举例: import $ from 'jquery'; import { Button } from 'antd'; class testJquery extends React.Component { constructor(props) { super(props); this.selectElement = this.selectElement.bind(this); } render() { return( <div
-
在React中应用SOLID原则的方法
目录 1.单一职责原则(SRP) 2.开放封闭原则(OCP) 3.里氏替换原则(LSP) 4.接口隔离原则(ISP) 5.依赖倒置原则(DIP) 6.小结 在面向对象编程(OOP)中,SOLID 原则是设计模式的基础,它的每个字母代表一种设计原则: 单一职责原则(SRP) 开放封闭原则(OCP) 里氏替换原则(LSP) 接口隔离原则(ISP) 依赖倒置原则(DIP) 下面就来看看每个原则的含义以及如何在 React 中应用 SOLID 原则! 1.单一职责原则(SRP) 单一职责原则的定义是每个
-
vue项目中导入swiper插件的方法
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件
-
解决vue中使用swiper插件问题及swiper在vue中的用法
Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas
-
深入理解React中es6创建组件this的方法
首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component
-
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用. <div class="swiper-wrapper" > <!-- =======循环部分======= --> &
-
React中this丢失的四种解决方法
发现问题 我们在给一个dom元素绑定方法的时候,例如: <input type="text" ref="myinput" accept = "image/*" onChange = {this.selectFile} /> React组件中不能获取refs的值,页面报错提示:Uncaught TypeError: Cannot read property 'refs' of null or undefind 小栗子 import Re
-
React中使用UEditor百度富文本的方法
前言 本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程.注意本文不提供一条龙式的使用方法,只是将使用过程中的一些实现思路进行总结,供以参考.react项目中导入ueditor,会存在各种不正交的问题,需要注意. 引入 首先在ueditor官网下载最新安装包,然后在项目入口的html中导入(导入方式不一,可以采用import的方式,需要自行度娘.但是无论哪种引入方式,只要想自定义功能,不正交问题就难以避免QAQ).不管三七二十一先跑起来再说.. <!DOCTYPE HT