swiper 解决动态加载数据滑动失效
2017-08-30 10:01
501 查看
两种解决方法
1.数据加载后进行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
});
1.数据加载后进行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 解决动态加载数据滑动失效的问题
- 解决swiper动态数据加载在移动端下左右滑动不好使?
- 解决swiper动态数据加载在移动端下左右滑动不好使?
- ajax动态加载swiper,滑动问题解决
- swiper动态加载数据轮播滑动异常问题
- bootStrap异步加载数据(动态加载数据)一二级菜单点击失效的解决办法
- 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效
- Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法
- ListView动态加载网络数据的解决办法
- echarts官网上的动态加载数据bug被我解决。咳咳/。
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
- android左右滑动加载分页以及动态加载数据
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题
- EasyUI的treegrid组件动态加载数据问题的解决办法-jquery
- EasyUI的treegrid组件动态加载数据问题解决办法
- spring 返回 JSON乱码问题的解决 及个人 动态加载ztree树结构的json数据代码
- swiper支持动态加载数据
- 解决:ScrollView嵌套ListView导致无法正确计算ListView的高度之动态加载图片高度常规方法失效。
- 关于动态加载的数据实现单选可取消的效果 并且附带 ScrollView滑动到指定位置
- Web App 向上滑动动态加载数据 2015-06-11 09:36 20人阅读 评论(0) 收藏