正文
最近的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.Swiperclass 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
新聞熱點
疑難解答
圖片精選
