解決使用 swiper 常見的問題

使用 swiper 的過程中個人總結

1. swiper插件使用方法, 直接查看文檔

• swiper基礎演示
• swiper API文檔

2.swiper近視初始化時, 其父級元素處於隱藏狀態(display:none),會導致swiper初始化失敗, 頁面中的滾動效果有問題

解決方法1: 
 var mySwiper = myApp.swiper('.guest-wrapper',{
     observer: true,//修改swiper自己或子元素時，自動初始化swiper
     observeParents: true//修改swiper的父元素時，自動初始化swiper
 });
 
解決方法2: 
直接寫死寬高
  var mySwiper = myApp.swiper('.guest-wrapper',{
     width:500,
     height:500
 });

3.滾動swiper插件中嵌套滾動插件, 要求子插件滾動全部完成后成能進行父元素的滾動 ==(swiper4 中滾動嵌套)==

//外層的父級 swiper 初始化
window.window_swiper = new Swiper('.window_swiper_container', {
    speed: 800,
    mousewheel: true,
    simulateTouch: false,
    nested: true,
    on: {

        onSlideChangeStart: function(swiper) { //滑動父級需要激活滾輪事件
            swiper.enableMousewheelControl();
        }

    }
});


// 內層子 swiper 初始化(可用在多個子 swiper 上)
    var swiper = new Swiper('.{{ns}}-swiper', {
      simulateTouch: false,
      mousewheel: true,
      nested: true,
      on: {
        slideChangeTransitionStart: function () {
        //此處禁止 外層 swiper
          window.window_swiper.mousewheel.disable();
        },
        slideChangeTransitionEnd: function () {
          window.window_swiper.mousewheel.enable();
        }
      }
    });

4.swiper里面的圖片懶加載與預加載, 可以使用自帶的 lazyload 方法

swiper4 懶加載文檔

設為true開啟圖片延遲加載默認值，使preloadImages無效。或者設置延遲加載選項。

圖片延遲加載：需要將圖片img標簽的src改寫成data-src，並且增加類名swiper-lazy。
背景圖延遲加載：載體增加屬性data-background，並且增加類名swiper-lazy。

還可以加一個預加載，<div class="swiper-lazy-preloader"></div>
或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

當你設置了slidesPerView:'auto' 或者 slidesPerView > 1，還需要開啟watchSlidesVisibility。


var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});

5. 取消拖動最后一頁或者第一頁時的留白狀態

resistanceRatio

抵抗率。邊緣抵抗力的大小比例。值越小抵抗越大越難將slide拖離邊緣，0時完全無法拖離。

6. 移動端頂部長菜單超出隱藏

長菜單超出隱藏滾動切換

7.free模式/抵抗反彈 freeMode

默認為false，普通模式：slide滑動時只滑動一格，並自動貼合wrapper，設置為true則變為free模式，slide會根據慣性滑動且不會貼合。

8.最后一頁的高度較小時的切換(最后一個頁腳不是全高的頁面展示)

var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 2,//'auto'
//slidesPerView : 3.7,
//如果設置為auto（例如制作全屏展示時的頁腳部分），最后一個slide在鍵盤或鼠標滾動時可能會直接跳到倒數第三個slide，
//此時可以手動設置activeIndex解決，如下
  onTransitionEnd: function(swiper){
      if(swiper.progress==1){
          swiper.activeIndex=swiper.slides.length-1
      }
          }
})

9.Effects (切換效果)

slide的切換效果，默認為"slide"（位移切換），可設置為"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉）。

10.內容滾動(在ios下也能滾動的很流暢)

//css
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 700px;
        height: 100%;
    }
    .swiper-slide {
        font-size: 18px;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 30px;
        font-size:13px;font-family:microsoft yahei; line-height:1.8;
    }
    p{
    
        margin-bottom:1em;
    }

//html
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
               <p>無限多的內容無限多的內容無限多的內容無限多的內容</p>
            </div>
        </div>
        <!-- Add Scroll Bar -->
        <div class="swiper-scrollbar"></div>
    </div>


//js
    var swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',     //滾動條的類名
        direction: 'vertical',      // 豎列排行
        slidesPerView: 'auto',      // 可同時展示多少個 slide 
        mousewheelControl: true,    //鼠標滾輪
        freeMode: true, // slide 是否貼合側邊
        roundLengths : true, //防止文字模糊
    });

11. 想在輪播圖外創建分頁器、上一頁和下一頁的按鈕(因為swiper的container默認overflow:hidden, 只能在輪播圖中的可視區域顯示切換菜單和上一頁下一頁)

獨立分頁元素，當啟用（默認）並且分頁元素的傳入值為字符串時，swiper會優先查找子元素匹配這些元素。可應用於分頁器，按鈕和滾動條。

var mySwiper = new Swiper('.swiper-container',{
    pagination : '.swiper-pagination',
    uniqueNavElements :false,
})

點擊查看swiper的 API 文檔