没有合适的资源?快使用搜索试试~ 我知道了~
首页react中使用swiper的具体方法
react中使用swiper的具体方法
4 下载量 76 浏览量
更新于2023-03-16
收藏 65KB PDF 举报
本篇文章主要介绍了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='%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>
weixin_38589150
- 粉丝: 6
- 资源: 919
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功