swiper 解決動態(tài)加載數(shù)據(jù)滑動失效的問題
更新時間：2018年02月26日 15:51:38 作者：TinaTxt
下面小編就為大家分享一篇swiper 解決動態(tài)加載數(shù)據(jù)滑動失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
兩種解決方法
1、數(shù)據(jù)加載后進(jìn)行swiper初始化
success:function(result){
var resultdata =eval("("+result+")");
if(resultdata.status == 1){
var dataList = resultdata.data;
currentPage = resultdata.currentPage;
pageCount = resultdata.pageCount;
var html = "";
if(pageCount == 0){
html ='<div class="noCollect">' + resultdata.msg + '</div>';
}else{
for(var i in dataList){
var data = dataList[i];
html += '<div class="swiper-container artistDiv">'
+ '<div class="swiper-wrapper">'
+ '<div class="swiper-slide workDiv">'
+ '<div class="app_inlineBlock workPic">'
+ '<img class="picImg" src="'+ data.artistAvatar +'" />'
+ '</div>'+'<div class="app_inlineBlock workInfo">'
+ '<div class="artistName">' + data.artistName + '</div>'
+ '<div class="workName">' + data.artworkName + '</div>'
+ '<div class="workValue">'+ data.typeName +'/'+ data.width + '*' + data.height +'/' +data.createYear + '</div>'
+ '</div><div class="app_inlineBlockRight workPrice">'
+ '<div class="price">￥'+ data.marketPrice +'</div></div></div>'
+ '<div class="swiper-slide delBtn">刪除</div></div></div>';
}
}
$("#list").append(html);
//swiper初始化
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
paginationClickable: true,
spaceBetween: 0
});
}
2、swiper初始化加兩行代碼
swiper1 = new Swiper('.swiper-container', {
initialSlide :0,
observer:true,//修改swiper自己或子元素時，自動初始化swiper
observeParents:true//修改swiper的父元素時，自動初始化swiper
});
以上這篇swiper 解決動態(tài)加載數(shù)據(jù)滑動失效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
彈出層內(nèi)含窗口且居中，在本例使用原生js來實現(xiàn)，與網(wǎng)上的有所不一樣，大家不妨參考下2014-05-05
JavaScript中函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別詳解
可能很多朋友只知道兩種聲明方式一個是函數(shù)聲明一個是函數(shù)表達(dá)式，具體有什么不同沒能說得很好。事實上，JavaScript的解析器對函數(shù)聲明與函數(shù)表達(dá)式并不是一視同仁地對待的。下面看看這兩者到底有什么不同。2016-08-08
xml 與javascript結(jié)合的問題解決方法...2007-03-03
用js實現(xiàn)鍵盤記錄，要關(guān)注瀏覽器的三種按鍵事件類型，即keydown，keypress和keyup，它們分別對應(yīng)onkeydown、onkeypress和onkeyup這三個事件句柄。一個典型的按鍵會產(chǎn)生所有這三種事件，依次是keydown，keypress，然后是按鍵釋放時候的keyup。2010-02-02
這篇文章主要介紹了JavaScript實現(xiàn)異步圖像上傳功能,本文展示了一種使用代碼示例立即顯示圖像的方法(使用圖像的Base64編碼版本)，同時將其上載到服務(wù)器，而無需等待操作完成。需要的朋友可以參考下2018-07-07
跨域常見的兩種方式，分別是jsonp和cors，這篇文章主要介紹了跨域解決之JSONP和CORS的詳細(xì)介紹，非常具有實用價值，需要的朋友可以參考下2018-11-11
本文主要介紹了js對table和ul li實現(xiàn)前臺分頁,需要的朋友可以參考下2014-02-02
js點(diǎn)擊任意區(qū)域彈出層消失實現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了js點(diǎn)擊任意區(qū)域彈出層消失實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)盒子拖拽動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
基于Bootstrap漂亮簡潔的CSS3價格表(附源碼下載)
該價格表基于Bootstrap網(wǎng)格系統(tǒng)來進(jìn)行布局，通過簡單的CSS3代碼來美化價格表，樣式非常的時尚漂亮，且能在不同屏幕下展示良好的效果,需要的朋友可以參考下2017-02-02