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"); });
经验分享 程序员 微信小程序 职场和发展