文档章节

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

风清扬-深圳
 风清扬-深圳
发布于 2015/10/19 09:05
字数 278
阅读 26
收藏 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
深圳
高级程序员
Android WebView 与JS的数据交互

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

习惯_搬砖
2015/05/06
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
jquery常用的插件1000收集

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

Alic
2011/03/07
0
6
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
09/08
0
0
面向移动设备的HTML5开发框架梳理

很久以前整理了篇将手机网站做成手机应用的JS框架。时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的。 1、jQuery Mobile jQuery Mobile 是 jQuery...

凯文加内特
2015/01/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用Newtonsoft将DataTable转Json

使用Newtonsoft将DataTable转Json Newtonsoft提供的将DataTable转成Json: /// <summary> /// DataTable转Json /// </summary> /// <param name="dt"></param> /// <ret......

DemonsI
刚刚
0
0
centos7安装zookeeper3.4.6

注:zookeeper充当注册中心 下载地址 http://mirror.bit.edu.cn/apache/zookeeper/zookeeper-3.4.6/ 单机 下载完成后,将安装包上传值服务器,解压 tar xvzf zookeeper-3.4.6.tar.gz 进入解...

码代码的小司机
1分钟前
0
0
136. Single Number

136. Single Number 题意:一个数组中所有数字都是两两相同,只有一个数字是单独的,求出这个数字的值。 很简单的题,使用异或就能处理。 异或介绍:bit位上的值不同,异或后,值为1.否则为0...

117
3分钟前
0
0
Hash和HashCode深入理解

目录介绍 1.Hash的作用介绍 1.1 Hash的定义 1.2 Hash函数特性 1.3 Hash的使用场景 2.如何判断两个对象相等 2.1 判断两个字符串 2.2 判断两个int数值 2.3 其他基本类型 3.HashCode深入分析 3....

潇湘剑雨
9分钟前
0
0
ecshop 漏洞如何修复 补丁升级与安全修复详情

目前ecshop漏洞大面积爆发,包括最新版的ecshop 3.0,ecshop 4.0,ecshop2.7.3全系列版本都存在着高危网站漏洞,导致网站被黑,被篡改,被挂马,许多商城系统深受其漏洞的攻击,给商城的运营者...

网站安全
9分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部