предисловие
Добро пожаловать на мой блогOECOMИсследуйте передний конец со мной.
текст
В недавнем проекте реакции нужно использовать карусельную карту, поэтому, естественно, я подумал о swiper, и я всегда хотел использовать его через установку npm, но я нашел много в Интернете, а информации было очень мало, поэтому я временно сослался на swiper непосредственно в файлах index.html.js и css для загрузки, давайте поговорим о конкретных шагах и использовании.
Во-первых, здесь я использую серию swiper3x. Ниже приведены конкретные шаги:
Добавьте файлы js и css в index.html.
<!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">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<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, пока введение в основном завершено, следующий шаг - как вызвать компонент реакции.
Тут нужно сказать, что импортированный js файл нельзя использовать напрямую в компоненте, а переменную нужно объявить в самом начале.Последующий способ использования такой же, как и при обычном способе написания html.Разница заключается в том, в чем жизненный цикл должен быть записан в., я лично рекомендую писать в цикле componentDidUpdate, потому что иногда данные собираются асинхронно, и сбор данных может быть не завершен, когда он только что завершен.После завершения сбора данных состояние обновляется, и цикл обновления будет запущен в это время.
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
На этом реализация карусели завершена, демо, которое я здесь написал, просто записывает данные в компонент, обычно данные должны быть получены асинхронно.
На самом деле тут другая проблема, это добавить событие клика в swiper-slide.Вообще говоря, событие onClick добавляется напрямую в div swiper-slide, но здесь возникает проблема.Если эту карусель можно зациклить При трансляции 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;
}