iScroll 下拉刷新
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./js/iscroll.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
body{
font-family: helvetica;
overflow: hidden;
}
header{
left: 0;
text-shadow: 0px 1px 0px #EBE9E9;
top:0px;
line-height: 48px;
font-size: 30px;
text-align: center;
font-weight: bold;
background-color: brown;
position: absolute;
z-index: 2;
width: 100%;
height: 48px;
}
footer{
left: 0;
background-color: brown;
position: absolute;
z-index: 2;
width: 100%;
height: 48px;
bottom: 0px;
}
#outer{
<!--left:0 这个参数很重要,不然看不到滚动条-->
left:0;
background-color: darkgrey;
overflow: hidden;
top:48px;
bottom:48px;
position: absolute;
z-index: 1;
width: 100%;
/*height: 600px;*/
}
#inner{
position: absolute;
z-index: 1;
width: 100%;
padding: 0px;
-webkit-tap-highlight-color:rgba(0,0,0,0); }
ul{
list-style: none;
margin: 0px;
padding: 0px;
}
li{
height: 40px;
margin: 3px;
background-color: #ffffff;
border-bottom: 1px solid #000000;
border-top: 1px solid gainsboro;
}
#pull-down{
text-align: center;
height: 50px;
line-height: 50px;
color: #ffffff;
font-size: 30px;
font-weight: bold;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',loaded,false);
//$(document).ready(loaded); //在这里,作用跟上一句作用相同,它们之间有区别,想知道去百度
var count = 0;
function pullDown(){
count ++;
console.log(count);
setTimeout(function(){
var html = "";
for(var i=0;i<12;i++){ //新增多少条记录由你决定,改变i的取值范围就行了
html += "<li>新增内容"+count+"</li>"
}
$("ul").prepend(html);
myScroll.refresh(); //重新计算iScroll
},2000) } ;
var myScroll,pullDownEl;
function loaded(){
//检查iScroll和jQuery是否已加载
if(!window.iScroll || !window.jQuery) {
alert("iScroll.js或jQuery.js不存在,请自行下载iScroll.js和jQuery.js同时修改src的值")
}
pullDownEl = $('#pull-down');
myScroll = new iScroll("outer",{
topOffset: 50, //这个是滚动条的起始位置,用于隐藏刷新提示框
onScrollMove: function(){
if(this.y > 5 && !pullDownEl.hasClass('flag')){
pullDownEl.addClass('flag');
this.minScrollY = 0; //这个值是为了看见刷新提示框
}else if(this.y < 5 && pullDownEl.hasClass('flag')){
pullDownEl.removeClass('flag');
this.minScrollY = 50; //隐藏刷新提示框 跟这个参数一样 topOffset: 50
}
},
onScrollEnd:function(){
if(pullDownEl.hasClass('flag')){
pullDownEl.text("正在刷新............");
pullDown();
}
},
onRefresh:function(){
pullDownEl.removeClass('flag');
pullDownEl.text("松手刷新............");
console.log("重新计算列表");
}
}) ;
}
</script>
</head>
<body>
<header>测试下拉刷新</header>
<div id="outer">
<div id="inner">
<div id="pull-down">松手刷新............</div>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
<li>test7</li>
<li>test8</li>
<li>test9</li>
<li>test10</li>
<li>test11</li>
<li>test12</li>
<li>test13</li>
<li>test14</li>
<li>test15</li>
<li>test16</li>
<li>test17</li>
<li>test18</li>
<li>test19</li>
<li>test20</li>
<li>test21</li>
<li>test22</li>
<li>test23</li>
<li>test24</li>
<li>test25</li>
<li>test26</li>
<li>test27</li>
<li>test28</li>
<li>test29</li>
<li>test30</li>
<li>test31</li>
<li>test32</li>
<li>test33</li>
<li>test34</li>
<li>test35</li>
<li>test36</li>
<li>test37</li>
<li>test38</li>
<li>test39</li>
<li>test40</li>
<li>test41</li>
</ul>
</div>
</div>
<footer></footer>
</body>
</html>
请自行下载 iScroll4和jQuery然后修改一下src的值
iScroll 下拉刷新的更多相关文章
- iscroll 下拉刷新，上拉加载
新手,直接贴代码了 <!DOCTYPE html><html class=""><head lang="en"><me ...
- iscroll 下拉刷新功能
版本号:iscroll4.2.5.js iscroll 版本很有关系 在线: demo链接 有出现白屏的bug,将iscroll版本改成iscroll4.2.5就可以了 html <!DO ...
- iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- H5基于iScroll实现下拉刷新，上拉加载更多
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...
- 基于iscroll.js实现下拉刷新和上拉加载特效
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...
- 使用iScroll实现上拉或者下拉刷新
上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...
- 使用iscroll插件实现下拉刷新功能
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- iscroll实现移动端下拉刷新，上拉加载更多
js菜鸡-------自我记录 html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- iscroll的下拉刷新，上拉翻页。
首先对iscroll的scrollTo方法进行稍微修改如下图: 对iscroll滑动到屏幕边缘不能弹回的bug进行修复,如下代码: function scrollbug() { var self = ...
随机推荐
- 【HDOJ】2492 Ping pong
线段树+离散化. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 2000 ...
- POJ2632 Crashing Robots（模拟）
题目链接. 分析: 虽说是简单的模拟,却调试了很长时间. 调试这么长时间总结来的经验: 1.坐标系要和题目建的一样,要不就会有各种麻烦. 2.在向前移动过程中碰到其他的机器人也不行,这个题目说啦:a ...
- 【转】Android 二维码 生成和识别（附Demo源码）--不错
原文网址:http://www.cnblogs.com/mythou/p/3280023.html 今天讲一下目前移动领域很常用的技术——二维码.现在大街小巷.各大网站都有二维码的踪迹,不管是IOS. ...
- 后缀.aspx.cs是什么软件的生成的
ASP.NET技术 aspx ——ASP.NET文件(网页) aspx.cs ——ASP.NET文件中的代码页(与上面的对应) asp.net是微软公司推出的新一代网站程序开发架构,ASP.NET技术 ...
- SVN项目库错误Unsupported FS format svn: Expected FS format between '1' and '4'; found format '6'
SVN项目库错误Unsupported FS format svn: Expected FS format between '1' and '4'; found format '6' 从这里找到解决方 ...
- [Java] JavaMail 查询邮件
上两篇提到如何发送邮件:JavaMail 发送 html 格式.带附件的邮件, JavaMail 简单案例.本文再演示下,如何读取邮箱上的邮件. 邮件内容的数据格式种类比较多,用户直接阅读邮件比较常见 ...
- H - Prince and Princess - HDU 4685(二分匹配+强连通分量)
题意:有N个王子M个公主,王子喜欢一些公主,而且只能是王子喜欢的人,他们才可以结婚,现在让他们尽可能多的结婚的前提下找出来每个王子都可以和谁结婚. 分析:先求出来他们的最大匹配,因为给的数据未必是完备 ...
- JQuery属性过滤(转)
属性过滤(Attribute Filters)的内容就是html元素中的属性 其包括以下几个选择器: [attribute] [attribute=value] [attribute!=value] ...
- SKTexture类
继承自 NSObject 符合 NSCodingNSCopyingNSObject(NSObject) 框架 /System/Library/Frameworks/SpriteKit.framewo ...
- CentOS 6.3下部署LVS(NAT)+keepalived实现高性能高可用负载均衡【转】
CentOS 6.3下部署LVS(NAT)+keepalived实现高性能高可用负载均衡 一.简介 VS/NAT原理图: 二.系统环境 实验拓扑: 系统平台:CentOS 6.3 Kernel:2 ...