<!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 下拉刷新的更多相关文章

  1. iscroll 下拉刷新，上拉加载

    新手,直接贴代码了 <!DOCTYPE html><html class=""><head lang="en"><me ...

  2. iscroll 下拉刷新功能

    版本号:iscroll4.2.5.js iscroll 版本很有关系  在线: demo链接   有出现白屏的bug,将iscroll版本改成iscroll4.2.5就可以了 html <!DO ...

  3. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. H5基于iScroll实现下拉刷新，上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

  5. 基于iscroll.js实现下拉刷新和上拉加载特效

    现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...

  6. 使用iScroll实现上拉或者下拉刷新

    上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...

  7. 使用iscroll插件实现下拉刷新功能

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. iscroll实现移动端下拉刷新，上拉加载更多

    js菜鸡-------自我记录 html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  9. iscroll的下拉刷新，上拉翻页。

    首先对iscroll的scrollTo方法进行稍微修改如下图: 对iscroll滑动到屏幕边缘不能弹回的bug进行修复,如下代码: function scrollbug() { var self = ...

随机推荐

  1. "红色病毒"问题 HDU 2065 递推+找循环节

    题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=2065 递推类题目, 可以考虑用数学方法来做, 但是明显也可以有递推思维来理解. 递推的话基本就是状态 ...

  2. 【转】JAVA字符串格式化-String.format()的使用

    原文网址:http://blog.csdn.net/lonely_fireworks/article/details/7962171 常规类型的格式化 String类的format()方法用于创建格式 ...

  3. 关于oledb对Excel的读取

    这两天项目需求要检索excel的内容,于是就研究了一下,话不多说,我就直接贴代码1.首先是连接excel. public DataTable SearchSheetToDT(string strSea ...

  4. 【4】JAVA---地址App小软件（UpdatePanel.class）（表现层）

    修改地址信息的一个表现层类. 必须选中地址,才能修改,否则会弹出窗口提示, 修改地址界面: /* * UpdatePanel.java * */ package cn.hncu.addr.ui; im ...

  5. 获取机器本地的公网ip地址

    1. ipecho.net/plain

  6. windows server 2003 64x 读取office数据终极解决办法 The 'Microsoft.Jet.OLEDB.4.0' provider is not registered

    微软老子信了你的邪!      试了各种办法没有效果 网友解决办法一: The 'Microsoft.Jet.OLEDB.4.0' provider is not registered on the ...

  7. RAC集群启动停止

    root用户执行 crsctl stop crscrsctl start crs /u01/app/11.2.0/grid/bin/crsctl stop crs

  8. Robotium -- 针对apk包的测试

    在使用Robotium测试的时候,有时候,测试人员并没有代码权限,而Robotium也可以在只有apk文件进行测试,下面就介绍一下这个过程. 1.设置环境变量 安装jdk环境和sdk环境 2.安装签名 ...

  9. &quot;蓝筹&quot;如何使程序猿？

    "蓝筹"这个词可能不是很多人知道这意味着什么.我会来普及知识.这是最重要的概念是指"越来越从长远来看更有价值"的含义.作为一个程序猿,我想你想使自己通过实际行动 ...

  10. unity3d android导出项目编译Multiple dex files define Lcom/unity3d/player/UnityPlayerActivity

    unity3d版本: 4.1.2 在导出android工程进行编译时,发现出现Multiple dex files define Lcom/unity3d/player/UnityPlayerActi ...