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)