swiper （Table切换和动态加载时候出现的问题）

本文为让心灵-去旅行原创，转载请说明.。

我们在写一个简单的swiper图片轮播的时候很简单，是写死的也就那么几张图片轮播。如果这时候图片和一些东西是后台的，你从js里动态添加到DOM时，这时候你就会发现各种问题。比如轮播图不动，无法滑动。下面的指示小圆点变得混乱了。等等。其实这些都是swiper的渲染问题，因为简单的swiper页面是静态的，资源数稳定的。当产生变化时，swiper需要重新渲染才行，不然就会出现问题。那么怎么解决呢，最简单的办法就是在ajax成功接收后台数据时我们开始渲染调用swiper函数;

例：

    function showSlider(data){
　　　　var data = eval(data);
　　　　　//这是动态添加数据
        var str="";
        for(var i =0;i<data.lunbos.length;i++){
            str+="<div class='swiper-slide'>"+
                "<a class='lunbotu1' href='newsDetail.html?id="+data.lunbos[i].link_url+"'>"+
                    "<img class='sw_img' src='"+data.lunbos[i].img_url+"' alt=''>"+
                "</a>"+
                "<p class='swiper_P'>"+data.lunbos[i].desc+"</p>"+
            "</div>";
        };
        $('.addin_slider').append(str);
　　　　　　//添加完以后就可以调用swiper了 哦了
            var mySwiper = new Swiper('.swiper_one', {
            // direction: 'vertical',
            loop: true,
            autoplay : 2000,
            // 如果需要分页器
            pagination: '.swiper-pagination',
        });
    };

2.table切换下的swiper问题

　　当你做一个可以切换的table并且切换的div里包括着两个或者n个轮播。这时候将swiper依次放进去的时候你会发现 左右滑动有问题，第一个是好的，从第一个以后的swiper都是乱的，我是将swiper的调用一起写在了切换的函数里这样就解决了乱的问题，因为切换的时候重新调用了一下。后来发现这样做每次切换就调用函数重新渲染这样很消耗资源和内存。最简单的方法我贴在下面吧.

    var mySwiper = new Swiper('.swiper_4', {
        slidesPerView: 1,
        spaceBetween: 20,
        autoplay: 2000,
        // 如果需要前进后退按钮
        // nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
        pagination: '.swiper-pagination',
        observer:true,//修改swiper自己或子元素时，自动初始化swiper  
        observeParents:true,//修改swiper的父元素时，自动初始化swiper  
        onSlideChangeEnd: function(swiper){  
            swiper.update(); //swiper更新 
        }  
    });

很简单你拿去复制粘贴就可以用了，不过函数名字要改一下。

转载于:https://www.cnblogs.com/well-nice/p/6305972.html