swiper4使用教程-填坑

本篇博客用于记录使用swiper插件中的一些关键点：

首先附上官网地址：https://www.swiper.com.cn/

ios中使用swiper的坑：

/*解决swiper中苹果点击变暗，在css中加入下面这段*/
* {
    outline: none;
    webkit-focus-ring-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-overflow-scrolling : touch;
}

长屏滚动实现填坑参考：

//这个swiper创建的是长屏滚动效果，重要的一点是，该对象的swiper-slide样式的height要设为auto!
        var swiperObj = new Swiper ('.swiper-container', {
            direction: 'vertical',
            slidesPerView: 'auto',
            freeMode: true,
            mousewheelControl: true,
            roundLengths : true, 
            on:{
                touchMove: function(event){
                },
                touchEnd: function(event){
                },
                touchStart:function(event){
                    //this代表当前，如果页面中有多个.swiper-container,则swiperObj为数组。
                    //swiperObj是个单独对象时，this可以换成该对象名字
                    //下面两行用来解决滑动过程中，点击可停止。
                    this.setTransition(0)
                    this.setTranslate(this.getTranslate());
                },
                transitionEnd: function(){
                    //下面的判断通常用来监听页面箭头提示，滑到底部隐藏
                    if(this.isEnd){
                        $('.arrowImg').hide();
                    }else{
                        $('.arrowImg').show();
                    }
                },
            }
        })

初始化swiper时：如果该页面是display等于none的状态，那么在该页面显示时可以调用 swiper.update()方法激活，页面宽高变化时，也可以调用update()来激活。

swiper做成长页面滑动时，swiper.setTranslate(0)可以回到顶部。

跳转到swiper中的某一屏：swiper.slideTo(index, speed, runCallbacks):

index	num	必选	指定将要切换到的slide的索引
speed	num	可选	切换速度(单位ms)
runCallbacks	boolean	可选	设置为false时不会触发transition回调函数

swiper滚动条的设置：

注意：如果swiper里面有输入框，弹起输出法又弹下后滚动条位置不归位，尝试把滚动条的那个dom元素放到swiper-container元素之外，并且更新滚动条对应样式。

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

.swiper-container-vertical>.swiper-scrollbar {
    position: absolute;
    right: 2%;
    top: 2%;
    z-index: 50;
    width: 2.8px;
    height: 100%;
    background-color: #616161;
    opacity: 0.7 !important;
}

.swiper-scrollbar-drag{
    width: 100%;
    left: 0;
    background: rgba(255,255,255,0.6);

var swiperObj = new Swiper ('.swiperBox', {
    direction: 'vertical',
    scrollbar: {
        el: '.swiper-scrollbar',
      },
    slidesPerView: 'auto',
    freeMode: true,
    mousewheelControl: true,
    roundLengths : true, 
    on:{
        touchMove: function(event){
        },
        touchEnd: function(event){
        },
        touchStart:function(event){
            //this代表当前，如果页面中有多个.swiper-container,则swiperObj为数组。
            //swiperObj是个单独对象时，this可以换成该对象名字
            //下面两行用来解决滑动过程中，点击可停止。
            this.setTransition(0)
            this.setTranslate(this.getTranslate());
        }
        
    }
})

最重要的是：多查文档 https://www.swiper.com.cn/api/index.html

注意：loop设为true的情况，可能会出现swiper中一些事件失效问题，索引也可能被打乱，这个要慎用。

loop为true解决参考：

　　loop为true代表可循环滚动，这时候插件就会创建若干个slide块来补位让滑动衔接，通常slide的数量就增多了。

　　部分slide块中元素事件失效，也许是因为该块slide是swiper复制补位的，但并未把事件带过去，解决方法可以用标签绑定。

　　<div onclick='method()'></div>,事件写到标签上，swiper复制出来的slide也拥有该事件属性，slide中块的索引和属性，也可以写在标签上，data-index='1'。

　　this.activeIndex值出现变动，可以考虑用this.realIndex，结合实际的值去测试，也可以用数组索引去操作:

　　var slideArr = $('.swiper-slide');

　　slideArr[0].find('.obj').addClass('layer');