web App使用jquery模拟原生APP中listView控件下拉刷新效果
web App使用jquery模拟原生APP中listView控件下拉刷新效果
风清扬-深圳 发表于2年前
web App使用jquery模拟原生APP中listView控件下拉刷新效果
  • 发表于 2年前
  • 阅读 24
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: web App使用jquery模拟原生APP中listView控件下拉刷新效果,主要是监控屏幕滚动的功能,参考jquery的scroll()方法!

HTML5写移动版,总是让用户拉到下面,然后点击触发加载更多,是不是没有那么炫呢?!

没关系,jquery 模拟原生APP中listView控件下拉刷新效果,代码如下:

javascript代码如下:

$(function(){
/*仿原生APP滚屏自动加载数据*/
var range = 50;
var totalheight = 0;
var loading = false;
$(window).scroll(function(){
var srollPos = $(window).scrollTop();
totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
if(($(document).height()-range) <= totalheight) {
if(!loading){
$.getMore();
}
}
});
/*点击触发加载*/
/*
$("#getMore").click(function(){
$.getMore();
});
*/
$.extend({getMore:function(){
loading = true;
var more = $("#getMore");
var page = more.attr("data-page");
var catid = more.attr("data-catid");
var totime = more.attr("data-totime");
var buyStatus = more.attr("data-buyStatus");
var keyword = more.attr("data-keyword");
$.ajax({
url : "xxxxxx.html",
type : "post",
data : {'page':page,'catid':catid,'totime':totime,'buyStatus':buyStatus,'keyword':keyword},
dataType : "json",
async : true,
beforeSend:function(){
  $("#loading").show();
},
success:function(res){
if(res.html != ''){
more.attr("data-page",res.page);
$(".main-padding").append(res.html);
$("#loading").hide();
loading = false;
}else{
Toast('没有更多信息',2000);
$("#loading").hide();
}
}
});
}});
});

HTML代码如下:

<div class="more">
<a id="getMore" href="javascript:;" data-catname="材料" data-keyword="" data-page="1"><img src="/images/weixin/moreInfo.png" alt=""></a>
</div>


共有 人打赏支持
粉丝 11
博文 58
码字总数 19480
×
风清扬-深圳
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: