微客导航 » 文章资讯 » jquery使用iscorll实现上拉、下拉加载刷新

jquery使用iscorll实现上拉、下拉加载刷新

2023-09-22 12:14:05 259

本文实例为大家分享了iscorll实现上拉下拉加载刷新的具体代码，供大家参考，具体内容如下

实现原理是:判断fiiptop,flipdown是否显示为依据

myScroll=newiScroll('wraphome',{
fixedScrollbar:true,
hideScrollbar:true,
fadeScrollbar:true,
hScrollbar:false,
vScrollbar:true,
onScrollMove:function(){
vartopstat=$(".fliptop").is(":visible");
vardownstat=$(".flipdown").is(":visible");
if(this.y>15&&!topstat&&!downstat){
$(".fliptop").fadeIn(300);
}elseif(this.y<15&&topstat){
$(".fliptop").hide();
}elseif(this.y<(this.maxScrollY-25)&&!topstat&&!downstat){
$(".flipdown").fadeIn(300);
this.refresh();//这里是当显示正在加载中时刷新底部位置
}elseif(this.y>(this.maxScrollY+25)&&downstat){
$(".flipdown").hide();
}
},
onTouchEnd:function(){
vartopstat=$(".fliptop").is(":visible");
vardownstat=$(".flipdown").is(":visible");
if(topstat&&!downstat){
$(".fliptop").html("正在加载中……");
setTimeout(function(){
//此处为你自己的逻辑方法
},3000);
}elseif(downstat&&!topstat){
$(".flipdown").html("正在加载中……");
setTimeout(function(){
//此处为你自己的逻辑方法
},3000);
}

}
});

页面部分



松手开始加载...

.............

松手开始加载...

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

jquery使用iscorll实现上拉、下拉加载刷新

热门推荐

随机推荐