本文爲讓心靈-去旅行原創，https://www.cnblogs.com/well-nice/p/6305972.html
我們在寫一個簡單的swiper圖片輪播的時候很簡單，是寫死的也就那麼幾張圖片輪播。如果這時候圖片和一些東西是後臺的，你從js裏動態添加到DOM時，這時候你就會發現各種問題。比如輪播圖不動，無法滑動。下面的指示小圓點變得混亂了。等等。其實這些都是swiper的渲染問題，因爲簡單的swiper頁面是靜態的，資源數穩定的。當產生變化時，swiper需要重新渲染才行，不然就會出現問題。那麼怎麼解決呢，最簡單的辦法就是在ajax成功接收後臺數據時我們開始渲染調用swiper函數;
例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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的調用一起寫在了切換的函數裏這樣就解決了亂的問題，因爲切換的時候重新調用了一下。後來發現這樣做每次切換就調用函數重新渲染這樣很消耗資源和內存。最簡單的方法我貼在下面吧.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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更新 } }); |
很簡單你拿去複製粘貼就可以用了，不過函數名字要改一下。