Swiper插件讀后感

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

摘要：今天，我無意中看到這樣一個東西，它叫做，這是一個開源免費的適用于各種移動端的觸摸滑動插件。同時導航欄也是可以手動滑動的，當用戶手動滑動導航欄，點擊某一個板塊時，下面的內容部分會隨即滑到相應的內容塊。

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/83945.html

vue輪播圖插件之vue-awesome-swiper

摘要：移動端輪播圖插件，在使用圖形界面插件中的組件無法實現觸摸滑動后，轉而使用插件安裝我這里安裝的是下面的這個版本使用全局導入樣式的話，我這里有用到分頁器，就在全局中引入了樣式組件引入在中使用常見的小圓點移動端輪播圖插件，在使用iview圖形界面插件中的carousel組件無法實現觸摸滑動后，轉而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...

binta 2019-08-23 12:00 評論0 收藏0
解決swiper.js中無縫輪播的問題。

摘要：根據公司需求需要對讓輪播無間隙播放，類似這種效果。通過查看代碼，發(fā)現這個類中有個屬性修改中的源碼，將這個屬性的值改為即可實現無縫隙輪播，就是這么簡單。輪播有它的好處是純打造的滑動特效插件，面向手機平板電腦等移動終端。根據公司需求需要對讓輪播無間隙播放，類似這種效果：http://www.16sucai.com/upload...。因為偷懶用的是swiper.js插件編寫的。swipe...

tuniutech 2019-08-30 14:05 評論0 收藏0
解決swiper.js中無縫輪播的問題。

摘要：根據公司需求需要對讓輪播無間隙播放，類似這種效果。通過查看代碼，發(fā)現這個類中有個屬性修改中的源碼，將這個屬性的值改為即可實現無縫隙輪播，就是這么簡單。輪播有它的好處是純打造的滑動特效插件，面向手機平板電腦等移動終端。根據公司需求需要對讓輪播無間隙播放，類似這種效果：http://www.16sucai.com/upload...。因為偷懶用的是swiper.js插件編寫的。swipe...

cnio 2019-08-01 18:39 評論0 收藏0
解決swiper.js中無縫輪播的問題。

摘要：根據公司需求需要對讓輪播無間隙播放，類似這種效果。通過查看代碼，發(fā)現這個類中有個屬性修改中的源碼，將這個屬性的值改為即可實現無縫隙輪播，就是這么簡單。輪播有它的好處是純打造的滑動特效插件，面向手機平板電腦等移動終端。根據公司需求需要對讓輪播無間隙播放，類似這種效果：http://www.16sucai.com/upload...。因為偷懶用的是swiper.js插件編寫的。swipe...

Rocko 2019-08-22 14:59 評論0 收藏0
vue-awesome-swiper滑塊插件使用基礎

摘要：前言目前在使用建立的版項目中，直接引入官方的文件會導致報錯，所以需要用到版本的。安裝版配置使用可參考插入滑塊組件與官方相同，額外的控制器依然可以放到整個滑塊之外。前言目前(2017-07-11)在使用vue-cli建立的webpack版項目中，直接引入官方的swiper文件會導致報錯，所以需要用到vue版本的swiper。 webpack-simple版可直接引入官方swiper文...

microelec 2019-08-20 17:54 評論0 收藏0