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