react中使用swiper的具体方法
160 浏览量
2020-08-27
12:27:30
上传
评论
收藏 65KB PDF 举报
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>
资源评论
