react中用swiper实现大图功能
1.引入Swiper(用的是4.5.0版本)
import Swiper from 'swiper';
//引入样式，还可以加上自己的样式
import '../../style/swiper.min.css';
2.在页面加载后和获取完数据后new一个swiper(如果数据没加载完就new会出现不能滑动现象)
new Swiper('.swiper-container', {
direction: 'horizontal',
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
loop: true, // 循环模式选项
zoom: {
maxRatio: 3,
},
speed: 500,//滑动的速度
on: {
click: function() {.....},
},
//分页
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
//阻止click冒泡
preventClicksPropagation: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
3.在return中添加大图结构
<div className="swiper-container" style={{ height: '100%', background: '#000' }}>
<div className="swiper-wrapper">
{Imgs.map((item, index) => (
<div className="swiper-slide" key={index}>
<div className="swiper-zoom-container">
<img src={`${item}?x-oss-process=image/resize,h_${580},limit_0`} width="100%" height="100%" />
</div>
</div>))}
</div>
<div className="swiper-pagination" />
<div className="swiper-button-prev" />
<div className="swiper-button-next" />
</div>
4. 如果在图片放大后切换图片时会闪一下就做如下样式修改
先试下给 swiper-slide css 添加overflow:
（1，给外部元素的父标css套一个：transform:translate3d(0,0,0);overflow:hidden;
（2，闪动元素/子元素：transform:translate3d(0,0,0)
