資訊專欄INFORMATION COLUMN
摘要：今天，我無意中看到這樣一個東西，它叫做，這是一個開源免費的適用于各種移動端的觸摸滑動插件。同時導(dǎo)航欄也是可以手動滑動的，當用戶手動滑動導(dǎo)航欄，點擊某一個板塊時，下面的內(nèi)容部分會隨即滑到相應(yīng)的內(nèi)容塊。
今天，我無意中看到這樣一個東西，它叫做Swiper，這是一個開源免費的適用于各種移動端的觸摸滑動插件。
看了一遍文檔，發(fā)現(xiàn)并不是很難，于是打算動手自己寫一個Swiper官網(wǎng)上的稍復(fù)雜點的小demo，看看自己理解的如何。
我所實現(xiàn)的功能是這樣的：
這是一個超出后自適應(yīng)的導(dǎo)航：
什么叫做超出后自適應(yīng)呢？就是當我左右滑動內(nèi)容部分的時候，上面導(dǎo)航部分會跟隨顯示當前導(dǎo)航nav，當我滑到第四頁時，由于超過了當前顯示的nav,導(dǎo)航欄會自行向下滑動一格，與內(nèi)容欄保持一致。同時導(dǎo)航欄也是可以手動滑動的，當用戶手動滑動導(dǎo)航欄，點擊某一個板塊（nav）時，下面的內(nèi)容部分會隨即滑到相應(yīng)的內(nèi)容塊。
實現(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插件可以很容易的實現(xiàn)移動端的滑動顯示需求，Swiper文檔中有很多的方法提供我們使用，
定制自定義的某些功能也比較方便，只要梳理好功能邏輯，然后靈活運用其方法即可。
但是通過寫這個小的功能，我發(fā)現(xiàn)了一個問題：
當左右滑動內(nèi)容部分的時候，需要快速滑動才能Swiper才能檢測到滑動，并執(zhí)行onSlideNextStart和onSlidePrevStart方法，如果緩慢的移動內(nèi)容塊，只能看到內(nèi)容塊的滑動完成，Swiper無法檢測到滑動，因此無法執(zhí)行onSlideNextStart和onSlidePrevStart方法。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83945.html
摘要：移動端輪播圖插件，在使用圖形界面插件中的組件無法實現(xiàn)觸摸滑動后，轉(zhuǎn)而使用插件安裝我這里安裝的是下面的這個版本使用全局導(dǎo)入樣式的話，我這里有用到分頁器，就在全局中引入了樣式組件引入在中使用常見的小圓點 移動端輪播圖插件，在使用iview圖形界面插件中的carousel組件無法實現(xiàn)觸摸滑動后，轉(zhuǎn)而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...
摘要：根據(jù)公司需求需要對讓輪播無間隙播放，類似這種效果。通過查看代碼，發(fā)現(xiàn)這個類中有個屬性修改中的源碼，將這個屬性的值改為即可實現(xiàn)無縫隙輪播，就是這么簡單。輪播有它的好處是純打造的滑動特效插件，面向手機平板電腦等移動終端。 根據(jù)公司需求需要對讓輪播無間隙播放，類似這種效果：http://www.16sucai.com/upload...。因為偷懶用的是swiper.js插件編寫的。swipe...
摘要：根據(jù)公司需求需要對讓輪播無間隙播放，類似這種效果。通過查看代碼，發(fā)現(xiàn)這個類中有個屬性修改中的源碼，將這個屬性的值改為即可實現(xiàn)無縫隙輪播，就是這么簡單。輪播有它的好處是純打造的滑動特效插件，面向手機平板電腦等移動終端。 根據(jù)公司需求需要對讓輪播無間隙播放，類似這種效果：http://www.16sucai.com/upload...。因為偷懶用的是swiper.js插件編寫的。swipe...
摘要：根據(jù)公司需求需要對讓輪播無間隙播放，類似這種效果。通過查看代碼，發(fā)現(xiàn)這個類中有個屬性修改中的源碼，將這個屬性的值改為即可實現(xiàn)無縫隙輪播，就是這么簡單。輪播有它的好處是純打造的滑動特效插件，面向手機平板電腦等移動終端。 根據(jù)公司需求需要對讓輪播無間隙播放，類似這種效果：http://www.16sucai.com/upload...。因為偷懶用的是swiper.js插件編寫的。swipe...
摘要：前言目前在使用建立的版項目中，直接引入官方的文件會導(dǎo)致報錯，所以需要用到版本的。安裝版配置使用可參考插入滑塊組件與官方相同，額外的控制器依然可以放到整個滑塊之外。 前言 目前(2017-07-11)在使用vue-cli建立的webpack版項目中，直接引入官方的swiper文件會導(dǎo)致報錯，所以需要用到vue版本的swiper。 webpack-simple版可直接引入官方swiper文...
閱讀 925·2019-08-30 15:54
閱讀 1487·2019-08-30 15:54
閱讀 2412·2019-08-29 16:25
閱讀 1305·2019-08-29 15:24
閱讀 761·2019-08-29 12:11
閱讀 2518·2019-08-26 10:43
閱讀 1242·2019-08-26 10:40
閱讀 482·2019-08-23 16:24
