文档章节

web App使用jquery模拟原生APP中listView控件下拉刷新效果

风清扬-深圳
 风清扬-深圳
发布于 2015/10/19 09:05
字数 278
阅读 163
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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
博文 73
码字总数 19480
作品 0
深圳
高级程序员
私信 提问
加载中
请先登录后再评论。
用于HTML5移动开发的10大移动APP开发框架【转】

今天给大家介绍10款有关HTML5移动开发APP开发框架,这几款框架都是比较优秀的移动 Web 开发框架,能够帮助开发者更加高效的开发移动Web应用。.   十款移动APP开发框架: 1.jquery mobile框架...

3D入魔
2018/06/21
0
0
开发移动端前端框架

1 jQuery Mobile jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格。jQuery Mobile1.4.0主要侧重于...

osc_dfi5j6xi
2018/05/11
1
0
用于HTML5移动开发的10大移动APP开发框架【转】

今天给大家介绍10款有关HTML5移动开发APP开发框架,这几款框架都是比较优秀的移动 Web 开发框架,能够帮助开发者更加高效的开发移动Web应用。.   十款移动APP开发框架: 1.jquery mobile框架...

osc_wp2jydi8
2018/06/21
2
0
不可错过的前端开发资源大荟萃

本周我们带来的前端推荐包含当前热门的bootstrap,html5,css3等技术内容和新闻话题,如果你还想近一步学习如何开发,还可以关注我们的极客课程库,里面涵盖了现代开发技术的‘学’与‘习’的...

gbin1
2014/10/22
10
0
移动web开发框架研究

原文网址链接:http://blog.csdn.net/xyzlmn/article/details/41052977 纯粹的总结一下移动web开发框架,移动web开发框架有jQueryMobile 、Sencha Touch等等,他们都来源于web开发,是成熟的框...

数通畅联
2015/02/27
672
0

没有更多内容

加载失败,请刷新页面

加载更多

使用getApplication()作为上下文的对话框抛出“无法添加窗口-令牌null不适用于应用程序”

问题: My Activity is trying to create an AlertDialog which requires a Context as a parameter. 我的活动试图创建一个AlertContext,它需要一个Context作为参数。 This works as expect......

法国红酒甜
47分钟前
11
0
java常用开发支持类库

UUID类 UUID是一个生成无重复字符串的程序类(JDK1.5之后出现),这个程序类的主要功能是根据时间戳实现一个自动的无重复的字符串定义(无重复指的是出现重复的概率极低)。 一般在获取UUID时...

哼着我的小调调
58分钟前
15
0
亚马逊测评买家号多开_可以解决这个问题嘛?_微信公众号: VMlogin中文版

对于很多亚马逊卖家来说,做亚马逊测评是并不可少的,都在为了自己的店铺能够获得更多的销售,着重培养自己产品的各项属性,以求获得一个更好的权重排名从而获得更多的曝光,但是在旺季期间亚...

竹节猫-ASOer
今天
10
0
Java基础系列——数组之java.util.Arrays使用以及可能出现的异常(12)

java.util.Arrays类即为操作数组的工具类,包含了用来操作数组(比 如排序和搜索)的各种方法。常用方法如下所示: boolean equals(int[] a,int[] b) 判断两个数组是否相等。 String toStrin...

卢佳鹏
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部