基于iscroll 5 的上拉加载下拉刷新
2015-09-18 15:39
393 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>iScroll demo: simple</title>
<script type="text/javascript" src="script/iscroll.js"></script>
<script type="text/javascript" src="script/iscroll-probe.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
// loLoading();
myScroll = new IScroll('#wrapper', { mouseWheel: true, probeType: 3 });
document.getElementById("logsssss").innerHTML = myScroll.maxScrollY;
var pos_s = (document.documentElement.clientWidth - 200) / 2;//窗口宽度-背景图宽度 的一半
var scroll_height = document.getElementById("wrapper").clientHeight;
var Direction = 0;
var IsHead = false;//是否到了最上
var IsLast = false;//是否到了最下
var IsRefreshing = false;//是否刷新中
var IsLoading = false;//是否加载中
var IsFirst = false;
myScroll.on("scrollStart", function () {
Direction = this.y;
if (Math.abs(Direction) - 2 < 0) {//从最上边开始拉
IsHead = true;
IsLast = false;
document.getElementById("logsssss").innerHTML = "最上边";
} else if (Math.abs(Direction) + myScroll.maxScrollY < 2) {//从最下边开始往下拉
IsLast = true;
IsHead = false;
document.getElementById("logsssss").innerHTML = "最下边";
}
});
var wrapper = document.getElementById("wrapper");
myScroll.on("scroll", function () {
if (IsHead) {
document.getElementById("logsssss").innerHTML = "松开刷新" + this.y;
if (this.y > 0) {
wrapper.style.backgroundPosition = pos_s + "px " + (this.y - 40) + "px";
if (this.y > 40) {
document.getElementById("logsssss").innerHTML = "0px " + this.y + "px";;
wrapper.style.backgroundImage = "url(script/img/step2.png)";
// wrapper.style.backgroundSize = "auto " + this.y + "px";
IsRefreshing = true;
} else {
wrapper.style.backgroundImage = "url(script/img/step1.png)";
}
} else {
IsHead = false;
}
}
if (IsLast) {
var distance = this.y - myScroll.maxScrollY;
if (distance < 2) {
document.getElementById("logsssss").innerHTML = pos_s + "px " + Math.round((scroll_height - 40 + distance)) + "px";
wrapper.style.backgroundPosition = pos_s + "px " + Math.round((scroll_height + distance)) + "px";
wrapper.style.backgroundImage = "url(script/img/step3.png)";
if (Math.abs(distance) > 40) {
IsLoading = true;
}
} else {
IsLast = false;
}
}
})
myScroll.on("scrollEnd", function () {
if (IsRefreshing) {
IsRefreshing = false;
loLoading();
}
if (IsLoading) {
IsLoading = false;
loLoading();
}
});
document.getElementById('me').addEventListener('tap', function () {
this.style.background = !this.style.background ? '#a00' : '';
}, false);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
function loLoading() {
var precent = 0;
var loadbar = setInterval(function () {
precent += 2;
if (precent >= 98) {
precent = 98;
clearInterval(loadbar);
}
document.getElementById("loading").style.width = precent + "%";
}, 50)
//如果有新数据加载进来，则myScroll.refresh()
}
</script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body, ul, li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
.step1 {
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
background-image: url(script/img/step1.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 200px 40px;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
</style>
</head>
<body onload="loaded()">
<div id="logsssss" style="color:#fff; width: 200px; position: fixed; bottom: auto; top: 0; left: auto; right: 0; z-index:9999; background-color: rgba(0,0,0,0.3)">日志</div>
<div id="header">上下拉刷新</div>
<div style="width:100%; height:1px; position:fixed; top:45px; z-index:99999">
<div id="loading" style="width: 0%; height: 1px; background-color: #00fe06"></div>
</div>
<div id="wrapper">
<div id="scroller">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li>Pretty row 21</li>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li>Pretty row 31</li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
<li>Pretty row 41</li>
<li>Pretty row 42</li>
<li>Pretty row 43</li>
<li>Pretty row 44</li>
<li>Pretty row 45</li>
<li>Pretty row 46</li>
<li>Pretty row 47</li>
<li>Pretty row 48</li>
<li>Pretty row 49</li>
<li>Pretty row 50</li>
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
<script>
</script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>iScroll demo: simple</title>
<script type="text/javascript" src="script/iscroll.js"></script>
<script type="text/javascript" src="script/iscroll-probe.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
// loLoading();
myScroll = new IScroll('#wrapper', { mouseWheel: true, probeType: 3 });
document.getElementById("logsssss").innerHTML = myScroll.maxScrollY;
var pos_s = (document.documentElement.clientWidth - 200) / 2;//窗口宽度-背景图宽度 的一半
var scroll_height = document.getElementById("wrapper").clientHeight;
var Direction = 0;
var IsHead = false;//是否到了最上
var IsLast = false;//是否到了最下
var IsRefreshing = false;//是否刷新中
var IsLoading = false;//是否加载中
var IsFirst = false;
myScroll.on("scrollStart", function () {
Direction = this.y;
if (Math.abs(Direction) - 2 < 0) {//从最上边开始拉
IsHead = true;
IsLast = false;
document.getElementById("logsssss").innerHTML = "最上边";
} else if (Math.abs(Direction) + myScroll.maxScrollY < 2) {//从最下边开始往下拉
IsLast = true;
IsHead = false;
document.getElementById("logsssss").innerHTML = "最下边";
}
});
var wrapper = document.getElementById("wrapper");
myScroll.on("scroll", function () {
if (IsHead) {
document.getElementById("logsssss").innerHTML = "松开刷新" + this.y;
if (this.y > 0) {
wrapper.style.backgroundPosition = pos_s + "px " + (this.y - 40) + "px";
if (this.y > 40) {
document.getElementById("logsssss").innerHTML = "0px " + this.y + "px";;
wrapper.style.backgroundImage = "url(script/img/step2.png)";
// wrapper.style.backgroundSize = "auto " + this.y + "px";
IsRefreshing = true;
} else {
wrapper.style.backgroundImage = "url(script/img/step1.png)";
}
} else {
IsHead = false;
}
}
if (IsLast) {
var distance = this.y - myScroll.maxScrollY;
if (distance < 2) {
document.getElementById("logsssss").innerHTML = pos_s + "px " + Math.round((scroll_height - 40 + distance)) + "px";
wrapper.style.backgroundPosition = pos_s + "px " + Math.round((scroll_height + distance)) + "px";
wrapper.style.backgroundImage = "url(script/img/step3.png)";
if (Math.abs(distance) > 40) {
IsLoading = true;
}
} else {
IsLast = false;
}
}
})
myScroll.on("scrollEnd", function () {
if (IsRefreshing) {
IsRefreshing = false;
loLoading();
}
if (IsLoading) {
IsLoading = false;
loLoading();
}
});
document.getElementById('me').addEventListener('tap', function () {
this.style.background = !this.style.background ? '#a00' : '';
}, false);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
function loLoading() {
var precent = 0;
var loadbar = setInterval(function () {
precent += 2;
if (precent >= 98) {
precent = 98;
clearInterval(loadbar);
}
document.getElementById("loading").style.width = precent + "%";
}, 50)
//如果有新数据加载进来，则myScroll.refresh()
}
</script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body, ul, li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
.step1 {
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
background-image: url(script/img/step1.png);
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 200px 40px;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
</style>
</head>
<body onload="loaded()">
<div id="logsssss" style="color:#fff; width: 200px; position: fixed; bottom: auto; top: 0; left: auto; right: 0; z-index:9999; background-color: rgba(0,0,0,0.3)">日志</div>
<div id="header">上下拉刷新</div>
<div style="width:100%; height:1px; position:fixed; top:45px; z-index:99999">
<div id="loading" style="width: 0%; height: 1px; background-color: #00fe06"></div>
</div>
<div id="wrapper">
<div id="scroller">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li>Pretty row 21</li>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li>Pretty row 31</li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
<li>Pretty row 41</li>
<li>Pretty row 42</li>
<li>Pretty row 43</li>
<li>Pretty row 44</li>
<li>Pretty row 45</li>
<li>Pretty row 46</li>
<li>Pretty row 47</li>
<li>Pretty row 48</li>
<li>Pretty row 49</li>
<li>Pretty row 50</li>
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
<script>
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JAVA 打印九九乘法表
- NSArray 初始化
- iOS 9 适配系列－快速获取URL Scheme的改变
- GTS Test fail testTestTelephonyCall_bindsToInCallServiceAndAddsCall
- 算法之每日一题相关资料和在线oj
- Linux多进程之间的文件锁详解
- 操作系统课程是如何改变我的
- jquery.validate.js实例演示
- 使用Android SDK中的隐藏类
- IIS7 IIS7.5 配置备份
- 谷歌地球卫片地图如何OZI中制成导航地图
- Caffe中的特殊layer解释【慢慢填坑中】
- 牛逼程序员养成记
- boost的安装问题 http://blog.csdn.net/begtostudy/article/details/1879213
- V8 之旅： 垃圾回收器
- 通俗说说DSP、SSP、RTB、DMP是什么
- iOS9适配
- Parallax Mapping
- hdu2196
- coreseek 中文分词 and sphinx