文档章节

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

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

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
深圳
高级程序员
私信 提问
不可错过的前端开发资源大荟萃

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

gbin1
2014/10/22
6
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0
24个漂亮的个性化HTML表单技术

COMSHARP CMS 写道 "HTML表单对象在不同浏览器渲染方式并不一致,尽管一些对象,如textbox和textarea可以通过CSS在不同浏览器获得一致的外观,其它多 数无法通过CSS 控制外观的对象在有些浏览...

红薯
2009/04/19
4.6K
1
Android WebView 与JS的数据交互

关于WebView 我们知道目前android市场上的一些应用采用的开发方式大致分为三种:Native App、Web App、Hybrid App。本文主要是Hybrid App中实现的主要技术native组件与js的数据交互的理解以及...

习惯_搬砖
2015/05/06
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(11.6)hadoop2.9.1平台上仓库工具hive2.3.4搭建

上一篇文章介绍了hive的原理以及实现机。本篇博客开始,博主将分享数据仓库hive工具搭建全过程。 一、安装Hive (1)、下载Hive和环境准备: Hive官网地址:http://hive.apache.org/index.html...

em_aaron
22分钟前
1
0
架构师和产品经理的区别

架构师和产品经理工作职责与内容异同如下:   一、架构师主要工作、职责如下:   1、协助部门经理制定相关技术开发规范;   2、带领团队持续改进产品的整体架构、功能模块、开发需求,...

咔咔大韦
45分钟前
4
0
第1章

背景:因为最近在考教师资格证,考的是计算机学科,所以学科考的是:信息技术学科知识与教学能力;因此图书馆借了一本书,把最基本的知识看一遍,为之后的笔试和面试做充足的准备。 大学计算...

怪咖先生forever
今天
1
0
element-ui之el-collapse-transition(折叠展开动画)源码解析学习

项目中发现同事使用了element-ui的el-collapse-transition来做折叠展开效果,打开源码看了下发现挺有意思,来解析学习一番。 el-collapse-transition的引入方式 // fade/zoom 等import 'e...

学霸猫
今天
1
0
解释器模式_实战

前言 解释器模式是什么?这个设计模式其实比较冷门,不太会解释,用例子说明把。解释器模式一般用在sql,xml,json解析等场景。比如说你有一个json对象,你要获取这个对象中任意一个节点的值。...

grace_233
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部