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 = ...
随机推荐
- ISNULL-sqlserver语句
语法 ISNULL ( check_expression , replacement_value ) 参数 check_expression 将被检查是否为 NULL的表达式.check_expres ...
- word页面不对齐，如何解决？
http://blog.163.com/haibianfeng_yr/blog/static/34572620201157105439516/
- HDOJ 2089 不要62（打表）
Problem Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来 ...
- perl中执行linux命令，及其区别
1. system("date '+%Y-%m-%d %H:%M:%S'") 该命令返回的是-1.(应该是date命令的main函数的返回值) 2. `date '+%Y-%m-% ...
- Jenkins 初见
在网上貌似没有找到Jenkins的中文的太多的文档,有的都是关于Hudson的一些 零零散散的,所以自己边学习边实践总结了以下系列文章,希望有助于大家对于Jenkins的使用. 本系列文章是基于我3年 ...
- 报错：Failed to create BuildConfig class
1. Project | Clean| Build Automatically 2. 在目录中找到gen目录,手动删除(一般是没有写权限导致Failed),再执行第一步方案.
- 用MFC完成一个简单的猜数字游戏: 输入的四位数中，位置和数字都正确为A，数字相同而位置不同的为B。
最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面 ...
- Jquery 的bind(), live(), delegate(), on()绑定事件方式
1. 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅. bind() 适 ...
- ASIHTTPRequest 详解 例子
目录 目录 发起一个同步请求 创建一个异步请求 队列请求 请求队列上下文 ASINetworkQueues, 它的delegate提供更为丰富的功能 取消异步请求 安全的内存回收建议 向服务器端上传数 ...
- TortoiseGit上传代码到GitHub
Github是管理软件开发的首选托管网站,12306的火车票插件一时让国内当时很多小白开发者(当然也包括我)认识到了这个网站.GitHub可以托管各种git库,并提供一个web界面,与 SourceF ...