我把来龙去脉说一遍,
开始静态swiper滚动正常,ajax加载也正常,两个一组和发生第一个问题,那就是swiper无法滚动动态数据。
我改为ajax加载之后马上初始化swiper,ok,滚动问题解决了,那么就出现了第二个问题,点击加载更多后局部刷新的时候会弹回页面顶部, $("").append();输出方法无毛病,折腾两天不知道问题出在哪?
下面是代码:
html
<div class="swiper-wrapper"> <div class="swiper-slide slidescroll"> <ul class="img" id="uiList"> </ul> <botton id="pull-up-label"style="">加载更多 </botton> <botton id="loading_icon" style="display: none;" >加载中</botton> </div> </div>
js代码
$(document).ready(function() { var Class="0";//当前剧情 var Type=1;//当前分类id var;//当前语言 var Letter="0";//当前头字母 a b c d var year="0";//当前年代 var page=1;//当前分页 var refresh_open = true; //首页数据 $("#pull-up-label").click(function(){ if(refresh_open){ refresh_open = false; $("botton[id='loading_icon']").css("display",""); $("#pull-up-label").css("display","none"); $.ajax({ url:"index.php/label/json/page/"+page+"/class/"+Class+"/id/"+Type+"/lang/"+Lang+"/letter/"+Letter+"/year/"+year+".html", success:function(result){ $("botton[id='loading_icon']").css("display","none"); $("#pull-up-label").css("display",""); if(result != ""){ $("#uiList").append(result); page +=1; //内容滚动初始化 var swiper = new Swiper('.scroll', { slidesOffsetBefore: 72, direction: 'vertical', freeMode: true, slidesPerView: 'auto', observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper }); setTimeout(function(){ refresh_open = true; },2000); }else{ $("#pull-up-label").html("无更多内容!"); $("#pull-up-label").attr("disabled",""); }; }}); } }); $("#pull-up-label").trigger("click"); });