文档章节

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

风清扬-深圳
 风清扬-深圳
发布于 2015/10/19 09:05
字数 278
阅读 25
收藏 0
点赞 0
评论 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
博文 58
码字总数 19480
作品 0
深圳
高级程序员
多功能下拉分页选择插件 - SelectPage

多功能下拉选择插件 SelectPage 简洁而强大的下拉分页选择器;支持远程数据(AJAX)、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件 入门指南、...

TerryZ ⋅ 2017/06/13 ⋅ 10

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

优化 模拟开发博客系统-->转发和重定向(3)

此时数据库虽然已经添加了数据,但如果你继续刷新浏览器数据库也会保存重复的数据, 这就需要重定向,我们需要在我们刷新浏览器的时候,数据库不会重新添加重复的数据 转发和重定向: 转发:...

Python赵博 ⋅ 05/07 ⋅ 0

Jquery实现京东tab切图

主要是用jquery实现tab切换,显示不同的内容。也可以用原生js实现,但是实现方式比较繁琐,这里暂时不写原生js实现。jquery相对代码少而且易于理解。 这里用了三种方式实装,在写的时候,发现...

Mrs_CoCo ⋅ 05/07 ⋅ 0

Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵 ⋅ 06/21 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 06/20 ⋅ 0

JavaWeb04-HTML篇笔记(四)

1.1 案例四:使用JQuery完成省市二级联动:1.1.1 需求: 在注册页面上籍贯的信息,需要用到省市联动效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的DOM操作】 遍历的方式二:...

我是小谷粒 ⋅ 05/09 ⋅ 0

jQuery中,html、val与text的区别与联系

文章作者:Tyan 博客:noahsnail.com | CSDN | 简书 本文主要介绍如何使用jQuery中的html(),text()和val()三种方法,用于读取、修改元素的html结构,元素的文本内容,以及表单元素的value值...

quincuntial ⋅ 2016/11/22 ⋅ 0

html5 下拉刷新(pc+移动网页源码)

本文demo下载地址:http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1071 本文实现在html5网页中使用下拉功能自动刷新显示更多内容, 使用jquery捕捉和处理相应的鼠标事...

智慧点点 ⋅ 04/25 ⋅ 0

Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比

讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题。 这是一个典型的 B/S 模式。 PS. B/S结构(Browser/Ser...

梁音 ⋅ 06/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

容器之重命名镜像

使用docker tag命令来重命名镜像名称,先执行help,查看如何使用如下 mjduan@mjduandeMacBook-Pro:~/Docker % docker tag --helpUsage:docker tag SOURCE_IMAGE[:TAG] TARGET_IMAGE[:TA...

汉斯-冯-拉特 ⋅ 16分钟前 ⋅ 0

with 的高级用法

那么 上下文管理器 又是什么呢? 上下文管理器协议包含 __enter__ 和 __exit__ 两个方法。with 语句开始运行时,会在上下文管理器对象上调用 __enter__ 方法。with 语句运行结束后,会在上下...

阿豪boy ⋅ 35分钟前 ⋅ 0

使用 jsoup 模拟登录 urp 教务系统

需要的 jsoup 相关 jar包:https://www.lanzous.com/i1abckj 1、首先打开教务系统的登录页面,F12 开启浏览器调试,注意一下 Request Headers 一栏的 Cookie 选项,我们一会需要拿这个 Cook...

大灰狼时间 ⋅ 35分钟前 ⋅ 0

关于线程的创建

转自自己的笔记: http://note.youdao.com/noteshare?id=87584d4874acdeaf4aa027bdc9cb7324&sub=B49E8956E145476191C3FD1E4AB40DFA 1.创建线程的方法 Java使用Thread类代表线程,所有的线程对......

MarinJ_Shao ⋅ 47分钟前 ⋅ 0

工厂模式学习

1. 参考资料 工厂模式-伯乐在线 三种工厂-思否 深入理解工厂模式 2. 知识点理解 2.1 java三种工厂 简单工厂 工厂模式 抽象工厂 2.2 异同点 逐级复杂 简单工厂通过构造时传入的标识来生产产品...

liuyan_lc ⋅ 59分钟前 ⋅ 0

Java NIO

1.目录 Java IO的历史 Java NIO之Channel Java NIO之Buffer Java NIO之Selector Java NIO之文件处理 Java NIO之Charset Java 可扩展IO 2.简介 “IO的历史”讲述了Java IO API从开始到现在的发...

士别三日 ⋅ 今天 ⋅ 0

[Err] ORA-24344: success with compilation error

从txt文本复制出创建function的脚本,直接执行,然后报错:[Err] ORA-24344: success with compilation error。 突然发现脚本的关键字,居然不是高亮显示。 然后我把脚本前面的空格去掉,执行...

wenzhizhon ⋅ 今天 ⋅ 0

Spring Security授权过程

前言 本文是接上一章Spring Security认证过程进一步分析Spring Security用户名密码登录授权是如何实现得; 类图 调试过程 使用debug方式启动https://github.com/longfeizheng/logback该项目,...

hutaishi ⋅ 今天 ⋅ 0

HAProxy基于KeepAlived实现Web高可用及动静分离

前言 软件负载均衡一般通过两种方式来实现: 基于操作系统的软负载实现 基于第三方应用的软负载实现 LVS是基于Linux操作系统实现的一种软负载,而HAProxy则是基于第三方应用实现的软负载。 ...

寰宇01 ⋅ 今天 ⋅ 0

微软自研处理器的小动作:已经开始移植其他平台的工具链

微软将 Windows 10 、Linux 以及工具链如 C/C++ 和 .NET Core 运行时库、Visual C++ 2017 命令行工具、RyuJIT 编辑器等移植到其自主研发的处理器架构 E2。微软还移植了广泛使用的 LLVM C/C++...

linux-tao ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部