swiper (Table切換和動態載入時候出現的問題)
阿新 • • 發佈:2019-01-07
本文為讓心靈-去旅行原創,https://www.cnblogs.com/well-nice/p/6305972.html
我們在寫一個簡單的swiper圖片輪播的時候很簡單,是寫死的也就那麼幾張圖片輪播。如果這時候圖片和一些東西是後臺的,你從js裡動態新增到DOM時,這時候你就會發現各種問題。比如輪播圖不動,無法滑動。下面的指示小圓點變得混亂了。等等。其實這些都是swiper的渲染問題,因為簡單的swiper頁面是靜態的,資源數穩定的。當產生變化時,swiper需要重新渲染才行,不然就會出現問題。那麼怎麼解決呢,最簡單的辦法就是在ajax成功接收後臺資料時我們開始渲染呼叫swiper函式;
例:
12345678910111213141516171819 | 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的呼叫一起寫在了切換的函式裡這樣就解決了亂的問題,因為切換的時候重新呼叫了一下。後來發現這樣做每次切換就呼叫函式重新渲染這樣很消耗資源和記憶體。最簡單的方法我貼在下面吧.
1234567891011121314 | 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更新 } }); |
很簡單你拿去複製貼上就可以用了,不過函式名字要改一下。