文档章节

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

风清扬-深圳
 风清扬-深圳
发布于 2015/10/19 09:05
字数 278
阅读 28
收藏 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
深圳
高级程序员
私信 提问
《JavaScript实用效果整理》系列分享专栏

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

开元中国2015
10/29
0
0
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
67 个节省开发者时间的实用工具、库与资源(前端向)

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

张孝国
06/26
0
0
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

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

孙华强
09/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 动态代理的实现

在Java中可以实现动态代理的方式有很多种:JDK方式、ASM字节码操控框架、开源的分析、编辑和创建Java字节码的类库Javassist、基于ASM框架实现的CGLIB JDK方式:通过Java反射的方式生成动态代...

我爱春天的毛毛雨
28分钟前
1
0
css 总结2

1、背景有关 (1)background-origin:border-box、padding-box、content-box //默认是padding-box(2)background-image: url(img_flwr.gif), url(paper.gif);(3)background-posi......

tianyawhl
29分钟前
1
0
java 每秒钟只允许十个线程同时并发

package com.qimh.thread.concurrent;import java.util.Date;import java.util.concurrent.ExecutorService;import java.util.concurrent.Executors;import java.util.concurren......

qimh
44分钟前
4
0
学习Hadoop大数据基础框架

什么是大数据?进入本世纪以来,尤其是2010年之后,随着互联网特别是移动互联网的发展,数据的增长呈爆炸趋势,已经很难估计全世界的电子设备中存储的数据到底有多少,描述数据系统的数据量的...

本宫没空2
46分钟前
2
0
redis

1,安装 sudo apt-get install redis-server 2,登录本地的 redis-cli 3,修改 .bashrc文件,连接其他线下数据库 vi .bashrc在最后增加alias redisa="redis-cli -h 10.15.100.134 -p 666...

鹏灬
51分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部