swiper插件的使用锋谐，安卓兼容性和修改分頁器樣式

Swiper(Swiper master)是目前應(yīng)用較廣泛的移動端網(wǎng)頁觸摸內(nèi)容滑動js插件令杈。使用的次數(shù)越多，遇到的問題就會越多碴倾，有的時候需求也會發(fā)生變化逗噩。

到目前止我遇到兩種情況：

第一種是：要求swiper-pagination（分頁器）的長度按百分比劃分，而不是我們平常使用的圓點(diǎn)或小方塊跌榔，每一頁（swiper-slide）分頁器寬度占總長度的N分之一异雁。

第二種是：在部分安卓手機(jī)上不能滑屏或者出現(xiàn)卡頓。

針對這兩種情況僧须，下面我會列出三組代碼纲刀，從最基本的例子開始，了解最簡單的情況下我們?nèi)绾螌懙Ｆ剑龅降谝环N情況下如何改示绊，遇到第二種情況下需要做哪些修改，下面開始分解暂论。

先看最簡單的例子：

<body>
<!-- 頭部banner輪播 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(img/swiper01.jpg)">
            <a href="#"></a>
        </div>
        <div class="swiper-slide" style="background-image:url(img/swiper02.jpg)">
            <a href="#"></a>
        </div>
        <div class="swiper-slide" style="background-image:url(img/swiper03.jpg)">
            <a href="#"></a>
        </div>
    </div>
    <div class="swiper-button-prev swiper-button-white"></div>  <!-- 白色 -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-pagination swiper-pagination-white"></div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        loop: true,
        paginationClickable: true, 
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        autoplay: 3000,
        effect: 'fade'
    });
</script>
</body>

這里我們來看看上面這些配制選項(xiàng)分別代表什么意思面褐，以及他們有什么用：

pagination: '.swiper-pagination',   // 分頁器容器的css選擇器或HTML標(biāo)簽。

loop: true,    // 設(shè)置為true 則開啟loop模式取胎。讓Swiper看起來是循環(huán)的展哭。

paginationClickable: true,   // 此參數(shù)設(shè)置為true時，點(diǎn)擊分頁器的指示點(diǎn)分頁器會控制Swiper切換闻蛀。

nextButton: '.swiper-button-next',   // 前進(jìn)按鈕的css選擇器或HTML元素匪傍。

prevButton: '.swiper-button-prev',  // 后退按鈕的css選擇器或HTML元素。
spaceBetween: 30,  // slide之間的距離（單位px）觉痛。
autoplay: 3000, //  自動切換的時間間隔
/*
或者可以像下面這樣寫役衡。
autoplay: ture,   //設(shè)置為true啟動自動切換，并使用默認(rèn)的切換設(shè)置薪棒。
//等同于以下設(shè)置
autoplay: {
    delay: 3000,  // 自動切換的時間間隔手蝎，單位ms
    stopOnLastSlide: false, // 如果設(shè)置為true，當(dāng)切換到最后一個slide時停止自動切換盗尸。（loop模式下無效）柑船。
    disableOnInteraction: true,  //用戶操作swiper之后帽撑，是否禁止autoplay泼各。默認(rèn)為true：停止。如果設(shè)置為false亏拉，用戶操作swiper之后自動切換不會停止扣蜻，每次都會重新啟動autoplay逆巍。操作包括觸碰，拖動莽使，點(diǎn)擊pagination等锐极。
},
*/

effect: 'fade'  // slide的切換效果，默認(rèn)為"slide"（位移切換）芳肌，可設(shè)置為'slide'（普通切換灵再、默認(rèn)）,"fade"（淡入）"cube"（方塊）"coverflow"（3d流）"flip"（3d翻轉(zhuǎn)）。

下面我們來看看其余的常用配制選項(xiàng)有哪些：

direction：'vertical,  // Slides的滑動方向亿笤，可設(shè)置水平(horizontal)或垂直(vertical)翎迁。
delay: 3000,  // 自動切換的時間間隔，單位ms,滑動速度净薛，即slider自動滑動開始到結(jié)束的時間（單位ms）汪榔，也是觸摸滑動時釋放至貼合的時間。 
grabCursor : true,  // 設(shè)置為true時肃拜，鼠標(biāo)覆蓋Swiper時指針會變成手掌形狀痴腌，拖動時指針會變成抓手形狀。
autoHeight: true,  // 高度隨內(nèi)容變化
preventClicks : false,  //默認(rèn)true 當(dāng)swiper在觸摸時阻止默認(rèn)事件（preventDefault）燃领，用于防止觸摸時觸發(fā)鏈接跳轉(zhuǎn)
preventLinksPropagation : false,  //默認(rèn)true士聪，阻止click冒泡。拖動Swiper時阻止click事件猛蔽。

官網(wǎng)上這個地址配置選項(xiàng) 列出了所有戚嗅，我這里只是把這個頁面中用到的以及比較常用的說明了一下。

注：剛剛把官網(wǎng)上列出來的配置選項(xiàng)一一對了一下枢舶，不知道是不是引用的版本不同還是別的什么原因懦胞，有些官網(wǎng)的配制選項(xiàng)的寫法不一樣，測試后還會出問題凉泄，反而是自己上面寫的demo沒有問題躏尉。后面慢慢補(bǔ)充原因吧。

下面是樣式代碼：

/* ==============
   頭部banner圖
   ============== */
.swiper-container {
    width: 100%;
    height: 3.32rem;
    border-bottom: 1px solid #d3d3d3;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
}

.swiper-slide a {
    display: block;
    width: 100%;
    height: 3.30667rem;
}

我這里也帖出官網(wǎng)的使用方法：Swiper使用方法后众，實(shí)際使用過程中遇到了問題也可以直接去官網(wǎng)查看胀糜。

平常工作中可能直接像上面這樣寫也能滿足要求。但如果你也在工作中遇到了上面我提兩種問題蒂誉，可以來看看下面的代碼教藻。

下面，我們來看第一個情況：

這個例子我用的是swiper-3.4.2的版本右锨，引用的代碼大家可以從官網(wǎng)上直接下載到括堤。

相信看過官方文檔的人都知道，swiper中有pagination參數(shù)——分頁導(dǎo)航，其中有分頁器樣式類型——type悄窃，它有四個參數(shù)讥电，分別為‘bullets’ 圓點(diǎn)（默認(rèn)），‘fraction’ 分式轧抗，‘progressbar’ 進(jìn)度條恩敌，‘custom’ 自定義。剛剛也測試了一下這個配制横媚，發(fā)現(xiàn)并不是我想要的效果纠炮，我想要的效果如下圖：

百分比分頁器1.jpeg

研究了一陣子之后，還是想通過自己的方式去解決灯蝴，所以就有了下面的代碼：
先給大家看一下我的html代碼抗碰，為方便查看，刪掉了大部分無用的代碼绽乔。

<div class="wrap">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="tickets">
                    <div class="ticket-code">
                        <p class="code-number">123456</p>
                        <p class="code-img"></p>
                        <span class="code-status">待參與</span>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="tickets">
                    <div class="ticket-code">
                        <p class="code-number">7891011</p>
                        <p class="code-img"></p>
                        <span class="code-status">待參與</span>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="tickets">
                    <div class="ticket-code">
                        <p class="code-number">123456</p>
                        <p class="code-img"></p>
                        <span class="code-status">待參與</span>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="tickets">
                    <div class="ticket-code">
                        <p class="code-number">123456</p>
                        <p class="code-img"></p>
                        <span class="code-status">待參與</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-white"></div>
    </div>
</div>

先說明一下弧蝇，這個頁面上swiper-slide的個數(shù)是不限定的，根據(jù)獲取到的數(shù)據(jù)進(jìn)行循環(huán)折砸，所以下面的js代碼是先獲取swiper-slide的個數(shù)看疗，然后整個.swiper-wrapper寬度是100%，用100%除以個數(shù)就是每個swiper-slide的分頁器所占的寬度睦授。

下面是js代碼：

<script type="text/javascript">
    $(function () {
        var ChildLength = $(".swiper-wrapper").children("div.swiper-slide").length;
        if (ChildLength <= 1) {
            $(".swiper-pagination").css({"display": "none"});
        } else if (ChildLength == 0) {
            $(".swiper-container").css({"display": "none"});
        }
        $(".swiper-pagination-bullet").css({"margin": "0", "borderRadius": "0", "width": 100 / ChildLength + "%"});
    });
</script>

當(dāng)然两芳，css代碼也是要做一些修改的：

.wrap .swiper-container {
    overflow: visible;
}

.wrap .swiper-pagination {
    position: absolute;
    left: 0 ;
    bottom: -1rem !important;
    width: 100%;
}

.wrap .swiper-pagination-white .swiper-pagination-bullet {
    display: inline-block;
    height: 1px;
    background: #E6E6E6;
    opacity: 1;
}

.wrap .swiper-pagination-white .swiper-pagination-bullet-active {
    display: inline-block;
    height: 1px;
    opacity: 1;
    background: #F73B42;
}

有了上面這些代碼以后，這個功能就實(shí)現(xiàn)了去枷，實(shí)測有效怖辆。

最后，我們來看第二種情況

一開始遇到這個問題删顶，有點(diǎn)蒙竖螃，還以為是很難解決的問題，好在經(jīng)過簡單的搜索就找到了解決辦法逗余，移動端swiper.js中的坑------你怎能錯過Ｌ嘏亍！Ｂ剂弧腻格！。

簡而言之就是我們上面的代碼只引用了swiper.js啥繁，而沒有引入swiper.css和swiper.animate.js菜职；重新引入后，問題就解決了旗闽；

根據(jù)這位作者給出的解決辦法酬核，我進(jìn)行了簡單的修改蜜另，同時，對所有的配制選項(xiàng)又做了一番了解愁茁，最終明白他這樣寫的原因了蚕钦，廢話不多說亭病，直接看代碼：
html中需要引入以下這些文件：

<head>
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
</head>
<body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/swiper-3.4.2.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
</body>

其他html的結(jié)構(gòu)還是上面的鹅很。下面是配制選項(xiàng)的寫法：

<script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container',{
       pagination: '.swiper-pagination',
       loop: false,
       mode: 'horizontal',
       freeMode:false, 
       touchRatio:0.5,  
       longSwipesRatio:0.1,  
       threshold:50,  
       followFinger:false, 
       observer: true,
       observeParents: true
   });
</script>

下面，一一來看這些配制選項(xiàng)的作用：

pagination: '.swiper-pagination',
loop: false,
mode: 'horizontal',   // 橫向滑屏

freeMode:false, // 默認(rèn)為false罪帖，普通模式：slide滑動時只滑動一格促煮，并自動貼合wrapper，設(shè)置為true則變?yōu)閒ree模式整袁，slide會根據(jù)慣性滑動且不會貼合菠齿。

touchRatio:0.5,  // 觸摸距離與slide滑動距離的比率。

longSwipesRatio:0.1,  // Swiper 中到上/下滑塊的觸發(fā)率,進(jìn)行l(wèi)ongSwipes時觸發(fā)swiper所需要的最小拖動距離比例坐昙，即定義longSwipes距離比例绳匀。值越大觸發(fā)Swiper所需距離越大。最大值0.5炸客。

threshold:50,  //滑動的臨界值疾棵，臨界值單位為px，如果觸屏距離小于該值滑塊不會運(yùn)動痹仙。

followFinger:false,  // 值為false時，僅當(dāng)你釋放slide時才會滑動开仰，當(dāng)你用手指按住滑塊它不會動拟枚。

observer: true, //修改swiper自己或子元素時，自動初始化swiper,啟動動態(tài)檢查器(OB/觀眾/觀看者)众弓，當(dāng)改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時恩溅，自動初始化swiper。默認(rèn)false谓娃，不開啟暴匠，可以使用update()方法更新。

observeParents: true //將observe應(yīng)用于Swiper的父元素傻粘，修改swiper的父元素時每窖，自動初始化swiper

加上這些配制，就解決了我的問題弦悉。以上窒典，就是我目前遇到的情況了。如果您有更好的解決辦法稽莉，還望多多指教瀑志，謝謝了。

swiper插件的使用，安卓兼容性和修改分頁器樣式