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

作者: 愿你如夏日清凉的风 | 来源:发表于2017-05-03 18:56 被阅读2629次

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。使用的次数越多，遇到的问题就会越多，有的时候需求也会发生变化。

到目前止我遇到两种情况：

第一种是：要求swiper-pagination（分页器）的长度按百分比划分，而不是我们平常使用的圆点或小方块，每一页（swiper-slide）分页器宽度占总长度的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>

这里我们来看看上面这些配制选项分别代表什么意思，以及他们有什么用：

pagination: '.swiper-pagination',   // 分页器容器的css选择器或HTML标签。

loop: true,    // 设置为true 则开启loop模式。让Swiper看起来是循环的。

paginationClickable: true,   // 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。

nextButton: '.swiper-button-next',   // 前进按钮的css选择器或HTML元素。

prevButton: '.swiper-button-prev',  // 后退按钮的css选择器或HTML元素。
spaceBetween: 30,  // slide之间的距离（单位px）。
autoplay: 3000, //  自动切换的时间间隔
/*
或者可以像下面这样写。
autoplay: ture,   //设置为true启动自动切换，并使用默认的切换设置。
//等同于以下设置
autoplay: {
    delay: 3000,  // 自动切换的时间间隔，单位ms
    stopOnLastSlide: false, // 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
    disableOnInteraction: true,  //用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰，拖动，点击pagination等。
},
*/

effect: 'fade'  // slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。

下面我们来看看其余的常用配制选项有哪些：

direction：'vertical,  // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
delay: 3000,  // 自动切换的时间间隔，单位ms,滑动速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。 
grabCursor : true,  // 设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
autoHeight: true,  // 高度随内容变化
preventClicks : false,  //默认true 当swiper在触摸时阻止默认事件（preventDefault），用于防止触摸时触发链接跳转
preventLinksPropagation : false,  //默认true，阻止click冒泡。拖动Swiper时阻止click事件。

官网上这个地址配置选项列出了所有，我这里只是把这个页面中用到的以及比较常用的说明了一下。

注：刚刚把官网上列出来的配置选项一一对了一下，不知道是不是引用的版本不同还是别的什么原因，有些官网的配制选项的写法不一样，测试后还会出问题，反而是自己上面写的demo没有问题。后面慢慢补充原因吧。

下面是样式代码：

/* ==============
   头部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;
}

我这里也帖出官网的使用方法：Swiper使用方法，实际使用过程中遇到了问题也可以直接去官网查看。

平常工作中可能直接像上面这样写也能满足要求。但如果你也在工作中遇到了上面我提两种问题，可以来看看下面的代码。

下面，我们来看第一个情况：

这个例子我用的是swiper-3.4.2的版本，引用的代码大家可以从官网上直接下载到。

相信看过官方文档的人都知道，swiper中有pagination参数——分页导航，其中有分页器样式类型——type，它有四个参数，分别为‘bullets’ 圆点（默认），‘fraction’ 分式，‘progressbar’ 进度条，‘custom’ 自定义。刚刚也测试了一下这个配制，发现并不是我想要的效果，我想要的效果如下图：

百分比分页器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的个数是不限定的，根据获取到的数据进行循环，所以下面的js代码是先获取swiper-slide的个数，然后整个.swiper-wrapper宽度是100%，用100%除以个数就是每个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>

当然，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;
}

有了上面这些代码以后，这个功能就实现了，实测有效。

最后，我们来看第二种情况

一开始遇到这个问题，有点蒙，还以为是很难解决的问题，好在经过简单的搜索就找到了解决办法，移动端swiper.js中的坑------你怎能错过！！！！。

简而言之就是我们上面的代码只引用了swiper.js，而没有引入swiper.css和swiper.animate.js；重新引入后，问题就解决了；

根据这位作者给出的解决办法，我进行了简单的修改，同时，对所有的配制选项又做了一番了解，最终明白他这样写的原因了，废话不多说，直接看代码：
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的结构还是上面的。下面是配制选项的写法：

<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>

下面，一一来看这些配制选项的作用：

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

freeMode:false, // 默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。

touchRatio:0.5,  // 触摸距离与slide滑动距离的比率。

longSwipesRatio:0.1,  // Swiper 中到上/下滑块的触发率,进行longSwipes时触发swiper所需要的最小拖动距离比例，即定义longSwipes距离比例。值越大触发Swiper所需距离越大。最大值0.5。

threshold:50,  //滑动的临界值，临界值单位为px，如果触屏距离小于该值滑块不会运动。

followFinger:false,  // 值为false时，仅当你释放slide时才会滑动，当你用手指按住滑块它不会动。

observer: true, //修改swiper自己或子元素时，自动初始化swiper,启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。默认false，不开启，可以使用update()方法更新。

observeParents: true //将observe应用于Swiper的父元素，修改swiper的父元素时，自动初始化swiper

加上这些配制，就解决了我的问题。以上，就是我目前遇到的情况了。如果您有更好的解决办法，还望多多指教，谢谢了。

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

到目前止我遇到两种情况：

先看最简单的例子：

这里我们来看看上面这些配制选项分别代表什么意思，以及他们有什么用：

下面我们来看看其余的常用配制选项有哪些：

下面，我们来看第一个情况：

最后，我们来看第二种情况

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读