swiper滑动失效问题

最近在写移动端的项目，页面有用的是swiper滑动的。

但是会发现在滑动时，不灵活，就是滑动时隐藏的数据会显示，但是不滑动数据又在初始那，隐藏的数据还是看不到。

于是各种排除问题，终于在pc端+移动端完美解决了问题

问题出在初始化的时候放在html文件了，应该放在接口取值后找到swiper-wrapper类后马上初始化！

 

$.ajax({
        type: "get",
        url: "",
        dataType: "jsonp",
        success: function (json) {
            console.log(json);
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 3.5,
                spaceBetween: 0,
                freeMode: true,
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true//修改swiper的父元素时，自动初始化swiper
            });
           
            // h5拼接字符串
            var saleItem=item.data;
            console.log(saleItem);
            if(saleItem==""||saleItem==null){
                $(".series-sale-wrap").empty();
            }
            var strSaleHtml="";
            for(var i in saleItem){
//循环的swiper-items
                strSaleHtml+=' <div class="swiper-slide swiper-slide-items">'
                strSaleHtml+=' <div class="tb-right-items">'
                strSaleHtml+='<div class="th-right-title">'+saleItem[i].name+' </div>'
                strSaleHtml+='<div class="sale-data">'
                for(var j in saleItem[i].sales_data){   
                    // console.log(saleItem[i].sales_data);
                    // console.log(saleItem[i].sales_data[j]);
                    strSaleHtml +='<div class="sale-items">'+saleItem[i].sales_data[j]+'</div>'
                    $(".sale-data").append(strSaleHtml);
                }
                strSaleHtml+='</div>';
                strSaleHtml+='</div>';
                strSaleHtml+='</div>';
            }
             $(".swiper-wrapper").append(strSaleHtml);
            
        },
        error: function () {
            console.log("请求失败");
        }

    })

 

这样就解决了呀，转自 https://www.jianshu.com/p/5dfeec32bf9a

 

在同一个页面中多次使用swiper轮播插件，如何避免冲突

再写页面用到两个swiper插件，点击时间弹框，会把其他的swiper渲染在时间弹框上，这就尴尬了。本来应该只有年月，现在把另一个的数据也渲染上了。

 

 

 

后来发现需要给不同的 给swiper-container 再起个类名，然后操作这个新的类名，这样两个 swiper 不会冲突

实例化时也根据不同的类名来写就好

 

 var swiper = new Swiper('.swiper-container-recommend', {
                slidesPerView: 3.5,
                spaceBetween: 0,
                freeMode: true,
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true//修改swiper的父元素时，自动初始化swiper
            });

 

这样就完美解决

 转载 https://blog.csdn.net/cvper/article/details/80725868