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: hidden样式；

      如果还不行试试就

    （1，给外部元素的父标css套一个：transform:translate3d(0,0,0);overflow:hidden;

    （2，闪动元素/子元素：transform:translate3d(0,0,0)