Swiper插件讀后感

CODING 發(fā)布于2019-08-20 17:53 / 2342人閱讀

摘要：今天，我無意中看到這樣一個(gè)東西，它叫做，這是一個(gè)開源免費(fèi)的適用于各種移動(dòng)端的觸摸滑動(dòng)插件。同時(shí)導(dǎo)航欄也是可以手動(dòng)滑動(dòng)的，當(dāng)用戶手動(dòng)滑動(dòng)導(dǎo)航欄，點(diǎn)擊某一個(gè)板塊時(shí)，下面的內(nèi)容部分會(huì)隨即滑到相應(yīng)的內(nèi)容塊。

今天，我無意中看到這樣一個(gè)東西，它叫做Swiper，這是一個(gè)開源免費(fèi)的適用于各種移動(dòng)端的觸摸滑動(dòng)插件。
看了一遍文檔，發(fā)現(xiàn)并不是很難，于是打算動(dòng)手自己寫一個(gè)Swiper官網(wǎng)上的稍復(fù)雜點(diǎn)的小demo，看看自己理解的如何。
我所實(shí)現(xiàn)的功能是這樣的：
這是一個(gè)超出后自適應(yīng)的導(dǎo)航：
什么叫做超出后自適應(yīng)呢？就是當(dāng)我左右滑動(dòng)內(nèi)容部分的時(shí)候，上面導(dǎo)航部分會(huì)跟隨顯示當(dāng)前導(dǎo)航nav，當(dāng)我滑到第四頁時(shí)，由于超過了當(dāng)前顯示的nav,導(dǎo)航欄會(huì)自行向下滑動(dòng)一格，與內(nèi)容欄保持一致。同時(shí)導(dǎo)航欄也是可以手動(dòng)滑動(dòng)的，當(dāng)用戶手動(dòng)滑動(dòng)導(dǎo)航欄，點(diǎn)擊某一個(gè)板塊（nav）時(shí)，下面的內(nèi)容部分會(huì)隨即滑到相應(yīng)的內(nèi)容塊。

實(shí)現(xiàn)的JS代碼如下：

/**
 * Created by 張麗娟 on 2017/7/10.
 */
window.onload = function () {
    var swiper1 = new Swiper(".swiper-container1" ,{
        slidesPerView:3,
        watchSlidesProgress : true,
        watchSlidesVisibility : true
    });   
    var swiper2 = new Swiper(".swiper-container2" ,{
        watchSlidesProgress : true,
        watchSlidesVisibility : true,
        onSlideNextStart:function(swiper){
            var $cur_slide = $(".swiper-slide.active",".swiper-container1 .sw1");
            if($cur_slide.next().hasClass("swiper-slide-visible")){
                $cur_slide.next().addClass("active").siblings().removeClass("active");
            }else{
                swiper1.slideNext();
                $cur_slide.next().addClass("active").siblings().removeClass("active");
            }
        },
        onSlidePrevStart:function (swiper) {
            var $cur_slide = $(".swiper-slide.active",".swiper-container1 .sw1");
            if($cur_slide.prev().hasClass("swiper-slide-visible")){
                $cur_slide.prev().addClass("active").siblings().removeClass("active");
            }else{
                swiper1.slidePrev();
                $cur_slide.prev().addClass("active").siblings().removeClass("active");
            }
        }
    });

    $(".swiper-slide",".swiper-container1 .sw1").click(function () {
        var targetIndex = swiper1.clickedIndex;
        //alert(targetIndex);
        $($(".swiper-slide",".swiper-container1 .sw1")[targetIndex]).addClass("active").siblings().removeClass("active");
        swiper2.slideTo(targetIndex, 500, false);
    })
};

使用Swiper插件可以很容易的實(shí)現(xiàn)移動(dòng)端的滑動(dòng)顯示需求，Swiper文檔中有很多的方法提供我們使用，
定制自定義的某些功能也比較方便，只要梳理好功能邏輯，然后靈活運(yùn)用其方法即可。
但是通過寫這個(gè)小的功能，我發(fā)現(xiàn)了一個(gè)問題：
當(dāng)左右滑動(dòng)內(nèi)容部分的時(shí)候，需要快速滑動(dòng)才能Swiper才能檢測(cè)到滑動(dòng)，并執(zhí)行onSlideNextStart和onSlidePrevStart方法，如果緩慢的移動(dòng)內(nèi)容塊，只能看到內(nèi)容塊的滑動(dòng)完成，Swiper無法檢測(cè)到滑動(dòng)，因此無法執(zhí)行onSlideNextStart和onSlidePrevStart方法。