swiper 解決動態(tài)加載數(shù)據(jù)滑動失效的問題
更新時間：2018年02月26日 15:51:38 作者：TinaTxt
下面小編就為大家分享一篇swiper 解決動態(tài)加載數(shù)據(jù)滑動失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
兩種解決方法
1、數(shù)據(jù)加載后進行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)文章
JavaScript代碼調(diào)試方法實例小結(jié)
這篇文章主要介紹了JavaScript代碼調(diào)試方法,結(jié)合實例形式總結(jié)分析了JavaScript錯誤信息的處理與代碼調(diào)試相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案
在前端直接讀取并原樣展示W(wǎng)ord文檔是一個相對復(fù)雜的任務(wù),因為Word文檔的格式(如.doc或.docx)與Web技術(shù)棧使用的格式(HTML、CSS)不兼容,這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)讀取word文件并將其原樣式展示的幾種方案,需要的朋友可以參考下2024-08-08
火狐也不知道為什么，自己功能上，樣式上面，都無法讓其強制換行，這里用JS來實現(xiàn)火狐里面強制換行的方法。2010-06-06
這篇文章主要介紹了JavaScript6 let 新語法優(yōu)勢介紹的相關(guān)資料,需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序App生命周期的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了JavaScript彈出窗口方法,非常實用的功能,需要的朋友可以參考下2014-08-08
JavaScript文件的同步和異步加載的實現(xiàn)代碼
本篇文章主要介紹了JavaScript文件的同步和異步加載的實現(xiàn)代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了如何使用JS console.log()技巧提高工作效率,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
這篇文章主要介紹了javascript使用正則表達(dá)式檢測IP地址的方法,需要的朋友可以參考下2014-12-12
js 實現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)
下面小編就為大家?guī)硪黄猨s 實現(xiàn)數(shù)值的千分位及保存小數(shù)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08