解决使用 swiper 常见的问题

使用 swiper 的过程中个人总结

1. swiper插件使用方法, 直接查看文档

2.swiper近视初始化时, 其父级元素处于隐藏状态(display:none),会导致swiper初始化失败, 页面中的滚动效果有问题

解决方法1:

 var mySwiper = myApp.swiper('.guest-wrapper',{

     observer: true,//修改swiper自己或子元素时，自动初始化swiper

     observeParents: true//修改swiper的父元素时，自动初始化swiper

 });

解决方法2:

直接写死宽高

  var mySwiper = myApp.swiper('.guest-wrapper',{

     width:500,

     height:500

 });

3.滚动swiper插件中嵌套滚动插件, 要求子插件滚动全部完成后成能进行父元素的滚动 ==(swiper4 中滚动嵌套)==

//外层的父级 swiper 初始化

window.window_swiper = new Swiper('.window_swiper_container', {

    speed: 800,

    mousewheel: true,

    simulateTouch: false,

    nested: true,

    on: {

        onSlideChangeStart: function(swiper) { //滑动父级需要激活滚轮事件

            swiper.enableMousewheelControl();

        }

    }

});

// 内层子 swiper 初始化(可用在多个子 swiper 上)

    var swiper = new Swiper('.{{ns}}-swiper', {

      simulateTouch: false,

      mousewheel: true,

      nested: true,

      on: {

        slideChangeTransitionStart: function () {

        //此处禁止 外层 swiper

          window.window_swiper.mousewheel.disable();

        },

        slideChangeTransitionEnd: function () {

          window.window_swiper.mousewheel.enable();

        }

      }

    });

4.swiper里面的图片懒加载与预加载, 可以使用自带的 lazyload 方法

swiper4 懒加载文档

设为true开启图片延迟加载默认值，使preloadImages无效。或者设置延迟加载选项。

图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。

背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。

还可以加一个预加载，<div class="swiper-lazy-preloader"></div>

或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。

var mySwiper = new Swiper('.swiper-container', {

  lazy: {

    loadPrevNext: true,

  },

});

5. 取消拖动最后一页或者第一页时的留白状态

resistanceRatio

抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。

6. 移动端顶部长菜单超出隐藏

长菜单超出隐藏滚动切换

7.free模式/抵抗反弹 freeMode

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

8.最后一页的高度较小时的切换(最后一个页脚不是全高的页面展示)

var mySwiper = new Swiper('.swiper-container',{

slidesPerView : 2,//'auto'

//slidesPerView : 3.7,

//如果设置为auto（例如制作全屏展示时的页脚部分），最后一个slide在键盘或鼠标滚动时可能会直接跳到倒数第三个slide，

//此时可以手动设置activeIndex解决，如下

  onTransitionEnd: function(swiper){

      if(swiper.progress==1){

          swiper.activeIndex=swiper.slides.length-1

      }

          }

})

9.Effects (切换效果)

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

10.内容滚动(在ios下也能滚动的很流畅)

//css

    html, body {

        position: relative;

        height: 100%;

    }

    body {

        background: #fff;

        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        font-size: 14px;

        color:#000;

        margin: 0;

        padding: 0;

    }

    .swiper-container {

        width: 700px;

        height: 100%;

    }

    .swiper-slide {

        font-size: 18px;

        height: auto;

        -webkit-box-sizing: border-box;

        box-sizing: border-box;

        padding: 30px;

        font-size:13px;font-family:microsoft yahei; line-height:1.8;

    }

    p{

        margin-bottom:1em;

    }

//html

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide">

               <p>无限多的内容无限多的内容无限多的内容无限多的内容</p>

            </div>

        </div>

        <!-- Add Scroll Bar -->

        <div class="swiper-scrollbar"></div>

    </div>

//js

    var swiper = new Swiper('.swiper-container', {

        scrollbar: '.swiper-scrollbar',     //滚动条的类名

        direction: 'vertical',      // 竖列排行

        slidesPerView: 'auto',      // 可同时展示多少个 slide

        mousewheelControl: true,    //鼠标滚轮

        freeMode: true, // slide 是否贴合侧边

        roundLengths : true, //防止文字模糊

    });

11. 想在轮播图外创建分页器、上一页和下一页的按钮(因为swiper的container默认overflow:hidden, 只能在轮播图中的可视区域显示切换菜单和上一页下一页)

独立分页元素，当启用（默认）并且分页元素的传入值为字符串时，swiper会优先查找子元素匹配这些元素。可应用于分页器，按钮和滚动条。

var mySwiper = new Swiper('.swiper-container',{

    pagination : '.swiper-pagination',

    uniqueNavElements :false,

})

巴特西