iScroll 下拉刷新
来源:互联网 发布:数据透视表英文版 编辑:程序博客网 时间:2024/06/04 23:54
//自己iScroll刷新,样式比较拙,想试试效果的弟兄请自行下载 iScroll4和jQuery然后修改一下src的值
一下是完整html和js代码,如有不明白可以加我qq:40466911问我,一起研究
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../lib/iscroll.js"></script>
<script type="text/javascript" src="jquery-1.9.1.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>
- iScroll 下拉刷新
- iScroll下拉刷新 源码
- iScroll下拉刷新上滑加载
- IScroll上拉加载下拉刷新
- 上拉刷新下拉下载iscroll
- iscroll实现下拉刷新,上拉加载
- iscroll上拉加载下拉刷新
- JQuery插件iScroll实现下拉刷新,滚动翻页特效
- 基于iscroll实现下拉和上拉刷新
- appcan与iscroll.js结合下拉刷新(转)
- 基于iscroll 5 的上拉加载下拉刷新
- Iscroll下拉刷新问题集合、click点击事件
- 基于iscroll实现下拉和上拉刷新
- H5基于iScroll实现下拉刷新,上拉加载更多
- 基于iscroll实现下拉和上拉刷新
- iScroll上拉加载下拉刷新 -> 遇到的问题
- iScroll.js 用法参考【基于webkit的下拉刷新】
- iScroll下拉刷新上拉加载(简洁易懂版本)
- 判断是否root静默安装
- PHP 局域网其他机器无法访问的问题
- 黑马程序员——【java】StringBuffer——常用方法
- WINDOWS7下修改androidSDK创建模拟器的存储路径
- iOS study Day6-数字转英文
- iScroll 下拉刷新
- 机器学习-delta法则学习OR问题
- Caused by: android.view.InflateException: Binary XML file line #11: Error inflating class
- 建造者模式--学习
- Android 当前时间的获取
- JAVA操作Hbase基础例子
- 黑马程序员——【Java】基本数据类型对象包装类
- 矩阵相乘
- 关于CocoaWebResource加载进度的方法