<!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. 生产环境下，不建议用早期版本的Mono........

    一个BUG修复需要4年!!!!!!!!!!!!!也是醉了....不造被微软收购后的Xamarin会不会好起来

  2. thickbox 关于动态生成 无法跳出弹出框的问题

    问题描述: 用jQuery动态生成thickbox的连接代码,发现没有效果. 原因: thickbox在页面加载后,会给a,input,area等绑定弹出事件. 通过tb_init(’a.thickb ...

  3. POJ2586 Y2K Accounting Bug(贪心)

    题目链接. 题目大意: 题目相当晦涩难懂啊. 一年的12个月,每5个月统计一次,如从1~5,2~6,3~7,...,8~12共统计了8次,已知每次都deficit,问这一年有没有盈利的可能. 一个月s ...

  4. 【转】byte[]数组比较（内容比较）--不错

    原文网址:http://amanda.blog.51cto.com/7238262/1215118 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责 ...

  5. 2015第30周三Spring常用工具类

    文件资源操作 文件资源的操作是应用程序中常见的功能,如当上传一个文件后将其保存在特定目录下,从指定地址加载一个配置文件等等.我们一般使用 JDK 的 I/O 处理类完成这些操作,但对于一般的应用程序来 ...

  6. JVM探索（二）

    java has four types of garbage collectors, Serial Garbage Collector Parallel Garbage Collector CMS G ...

  7. tomcat thread dump 分析【转载】

    前言 Java Thread Dump 是一个非常有用的应用诊断工具, 通过thread dump出来的信息, 可以定位到你需要了解的线程, 以及这个线程的调用栈. 如果配合linux的top命令, ...

  8. XML FREESWITCH APPLICATION 实现

    XML XML在FS(FreeSwitch)中进行了大量的使用,其中dialplan就是其中非常主要的一快内容.通过下面的描述,我们可以知道在执行XML中的语句: <action applica ...

  9. ViewPager 详解（三）---PagerTabStrip与PagerTitleStrip添加标题栏的异同

    前言:在前两篇文章中,我们讲解了滑动页面的的实现方法与四大函数的意义,但有时,仅仅实现页面滑动是不够的,还要有标题栏才会显得更友好.所以在这篇文章中,我将会向大家展示在Android.support. ...

  10. 将Apache添加为Linux的服务 实现自启动(转)

    在Linux下用源代码方式编译安装完Apache后,启动关闭Apache可以通过如下命令实现: /app/apache2.2.14/bin/apachectl start | stop | resta ...