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 = ...
随机推荐
- LD1-B(最短路径-SPFA)
题目链接 /* *题目大意: *给定v个点的重量,并给定e条边,每条边具有一个权值; *在e条边中选v-1条边使这v个点成为一棵树; *定义这棵树的代价为(每棵子树节点重量和其子树根到父节点的边的权值 ...
- 如何唯一确定一台iOS设备
如果你的iOS应用需要针对设备做特定的操作,或者需要硬件的信息来进行判定等等的,你就需要对iOS设备进行唯一性的判定. 苹果设备有个先天的东西符合这个需求,UDID,这个东东用iTunes就可以看到, ...
- finally与return
finally关键字:和try块使用,一般做资源释放操作,比如关闭流.关闭数据库连接,释放锁. return:用于返回值. finally块可保证一定执行,当逻辑处理有返回值时,会首先执行finall ...
- ruby+rt标签的效果
代码如下: <ruby>我是孤行者<rt>wo shi gu xing zhe</tr></ruby> 效果如下
- angularjs 创建自定义的指令
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...
- 枚举的基本使用方法 Enumerations
枚举的基本使用方法 Enumerations Enumeration enum SomeEnumeration{ case enumeration1 case enumeration2 case ...
- 杭电 HDU ACM 1698 Just a Hook（线段树 区间更新 延迟标记）
欢迎"热爱编程"的高考少年--报考杭州电子科技大学计算机学院 Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memor ...
- struts2在web.xml中配置详情
web.xml是web应用中载入有关servlet信息的重要配置文件,起着初始化servlet,filter等web程序的作用. 通常,全部的MVC框架都须要Web应用载入一个核心控制器.那採取什么方 ...
- SPOJ PGCD （mobius反演 + 分块）
转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents by---cxlove 题意 :求满足gcd(i , j)是素数(1 &l ...
- linux下用phpize给PHP动态添加扩展(转)
使用php的常见问题是:编译php时忘记添加某扩展,后来想添加扩展,但是因为安装php后又装了一些东西如PEAR等,不想删除目录重装,别说,php还真有这样的功能. 我没有在手册中看到. 如我想增加b ...