swiper遇到的坑

Posted SharkChilli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper遇到的坑相关的知识,希望对你有一定的参考价值。

1.一个页面引用多个swiper插件,出现混乱问题;

  解决方法: 1.实例化swiper时加上其父元素加以区分 

        2.Swiper加上ID或Class区分,要保留默认的类名swiper-container

  如下: 


            <script>
            var swiper = new Swiper(‘.course_banner2 .swiper-container‘, {
                pagination: ‘.course_banner2 .swiper-pagination‘,
                paginationClickable: true,
                loop: true,
                autoplay: 2500
            });
            </script>

 

2. swiper隐藏之后,再显示,滑动不流畅,且无限滑动会失败;

  解决方法: 添加一下两个属性   

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

3.动态生成的swiper,如append(),或html()添加的,无限滑动效果失败;

  解决方法:

    a. 添加上面两个属性

    b.把swiper方法写在动态生成的方法里面

  如下所示:

  


function bigPic(comment_id) {
        $(‘.win_pic‘).show();
        $.post("{:U(‘Course/ajaxComment‘)}", {‘c_id‘:comment_id}, function(data){
            if(data.status == 1){
                $("#content").text(data.comment.c_content);
                $(".swiper-wrapper").html(‘‘);
                var html = ‘‘;
                var images = data.comment.images;
                for (var i=0; i < images.length; i++) {
                    html += "<div class=‘swiper-slide‘><img src=__ROOT__/" + images[i][‘thumb_image‘] + "></div>";                    
                }
                $(".swiper-wrapper").html(html); //swiper已动态生成
                //实例化swiper
                var swiper = new Swiper(‘.nav .swiper-container‘, {
                    pagination: ‘.nav .swiper-pagination‘,
                    paginationClickable: true,
                    centeredSlides: true,
                    autoplay: false,
                    autoplayDisableOnInteraction: false,
                    paginationType: ‘fraction‘,
                    observer: true,//修改swiper自己或子元素时,自动初始化swiper
                    observeParents: true,//修改swiper的父元素时,自动初始化swiper
                    loop: true,
                    paginationFractionRender: function(swiper, currentClassName, totalClassName) {
                        return ‘<span class="‘ + currentClassName + ‘"></span>‘ +
                            ‘/‘ +
                            ‘<span class="‘ + totalClassName + ‘"></span>‘;
                    }
                })
            }
            console.log(data);
        }, "json");
        
    }

 4.移动端使用swiper需加onTouchStart、onTouchEnd,下拉时轮播停止BUG。(针对 apicloud 开发)

   


var swiper = new Swiper(‘.swiper-container‘, {
        pagination: ‘.swiper-pagination‘,
        loop: true,
        paginationClickable: true,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false,
        onTouchStart: function(swiper) {
                api.setFrameAttr({
                    name: api.frameName,
                    bounces: false
                });
            },
        onTouchEnd: function(swiper) {
                api.setFrameAttr({
                    name: api.frameName,
                    bounces: true
                });
            }
    });

  

以上是关于swiper遇到的坑的主要内容,如果未能解决你的问题,请参考以下文章

vue项目中使用swiper插件遇到的坑

使用swiper动态加载数据遇到的坑

有关swiper动态改变数据遇到的坑(不能自动滚动,自动跟新数据,切换不正常)

使用swiper轮播图进行数据传输的时候遇到的坑

偶遇vue-awesome-swiper的坑

vue03----生命周期nextTick()reffiltercomputedvue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到什么问题踩过的坑)