<!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. （转）C++ 编程规范

    转载地址:http://www.cnblogs.com/len3d/archive/2008/02/01/1061902.html C/C++编码规范 今天人们越来越明白软件设计更多地是一种工程,而不 ...

  2. 【转】 Linux内核中读写文件数据的方法--不错

    原文网址:http://blog.csdn.net/tommy_wxie/article/details/8193954 Linux内核中读写文件数据的方法  有时候需要在Linuxkernel--大 ...

  3. （转载）细说PHP中strlen和mb_strlen的区别

    (转载)http://developer.51cto.com/art/201105/263103.htm 在PHP中,strlen与mb_strlen是求字符串长度的函数,但是对于一些初学者来说,如果 ...

  4. rails console --sandbox出现的安装错误解决方案

    rails中可以用使用console命令行来测试运行rails应用程序,但是采用源码编译安装的话可能缺少readline动态库,导致ruby无法使用这个库此时如果调用rails console(rai ...

  5. Linux项目一

    Linux项目一 引言: 这是我去年做的东西,一直没有时间整理,今天又要做一个基于这个项目的客户端与服务器版本. 以前我写的库文件中的函数耦合度很大,在一个函数中调用另一个函数,导致一无法拆开使用! ...

  6. 快速求幂（Quick Exponentiation）

    接触ACM没几天,向各路大神求教,听说ACM主要是研究算法,所以便开始了苦逼的算法学习之路.话不多说,RT所示,学习快速求幂. 在头文件<math.h>或是<cmath>中,d ...

  7. @RestController

    /* * Copyright 2002-2014 the original author or authors. * * Licensed under the Apache License, Vers ...

  8. 3分钟学会sessionStorage用法（h5页面返回滚动到上次浏览器位置）

    前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...

  9. 百度——LBS.云 v2.0——创建自己的地理云数据

    随着云技术和地理信息(GIS)技术的发展,今年终于进入了.地理分享的新纪元.百度提供了LBS的云存储.真是个不错的功能.下面让我们来看看如何使用吧. 1.注册百度开发者账号(此处略去88个字) 2.创 ...

  10. JPDA 利用Eclipse和Tomcat进行远程调试 --转

    1 编辑tomcat\bin\catalina.bat  ,添加 rem =============================================================== ...