<!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. 14.2 InnoDB and the ACID Model

    14.2 InnoDB and the ACID Model ACID 模型是一组数据库设计原则,强调可靠性方面对于商业数据和关键人物. MySQL 包含组件比如InnoDB存储引擎坚持ACID 模型 ...

  2. -_-#【userAgent】极速模式与非极速模式存在差异

    UC浏览器 Android 极速模式 UC浏览器 Android 非极速模式

  3. 在 Windows 下远程桌面连接 Linux - XManager 篇

    XManager是一个简单易用的高性能的运行在Windows平台上的X-Server软件,而Gnome和KDE就是X-Client,Linux下的X-Server则为Xorg.它能把远端Unix/Li ...

  4. 【转】TCP三次握手过程

    写的非常明白:http://www.cnblogs.com/rootq/articles/1377355.html TCP协议三次握手过程分析 TCP(Transmission Control Pro ...

  5. selenium webdriver python 开始

    学习资料: Selenium with Python: http://selenium-python.readthedocs.org/en/latest/index.html 乙醇的python se ...

  6. WebMagic开源垂直爬虫介绍

    WebMagic项目代码分为核心和扩展两部分.核心部分(webmagic-core)是一个精简的.模块化的爬虫实现,而扩展部分则包括一些便利的.实用性的功能.WebMagic的架构设计参照了Scrap ...

  7. oracle for update和for update nowait

    原文地址:http://www.cnblogs.com/quanweiru/archive/2012/11/09/2762223.html 1.for update 和 for update nowa ...

  8. ubuntu14.04 安装tar.gz文件

    UBUNTU14.04 中tar.gz安装方法 # 是root用的,如果想一直用就要先root设置密码sudo passwd root.$ 一般用户 root@big-System-Product-N ...

  9. 数据迁移sql

    1.把数据库test中的表Table1中的数据插入到数据库test2中的表Table2:insert into test2.Table2(a,c,d) select a,c,5 from test.T ...

  10. 给Android程序猿的六个建议

    假设你一年前写的代码 , 在如今看来你还感觉写的非常不错 , 那么说明你学习的不够多. 不要在Context中持有静态引用 public class MainActivity extends Loca ...