swiper ajax 追加,关于swiper和Ajax滚动的诡异问题?
我把来龙去脉说一遍,
开始静态swiper滚动正常,ajax加载也正常,两个一组和发生第一个问题,那就是swiper无法滚动动态数据。
我改为ajax加载之后马上初始化swiper,ok,滚动问题解决了,那么就出现了第二个问题,点击加载更多后局部刷新的时候会弹回页面顶部, $("").append();输出方法无毛病,折腾两天不知道问题出在哪?
下面是代码:
html
加载更多
加载中
加载更多 加载中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");
});
我把来龙去脉说一遍, 开始静态swiper滚动正常,ajax加载也正常,两个一组和发生第一个问题,那就是swiper无法滚动动态数据。 我改为ajax加载之后马上初始化swiper,ok,滚动问题解决了,那么就出现了第二个问题,点击加载更多后局部刷新的时候会弹回页面顶部, $("").append();输出方法无毛病,折腾两天不知道问题出在哪? 下面是代码: html 加载更多 加载中 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"); });