iscroll5实现一个下拉刷新上拉加载的效果
生活随笔
收集整理的這篇文章主要介紹了
iscroll5实现一个下拉刷新上拉加载的效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
直接上代碼！！！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
#wrapper {
width: 100%;
}
.up, .down, li {
height: 49px;
line-height: 49px;
text-align: center;
}
.up {
display: none;
background-color: darkgrey;
color:#ffffff;
border-bottom: 1px solid lightgrey;
}
.down {
display: none;
background-color: darkgrey;
color: #ffffff;
}
li {
background-color: darkgrey;
border-bottom: 1px solid lightgrey;
}
#wrapper {
position: relative;
height: 500px;
background: #aaa;
overflow: hidden; /*iscroll不能設置overflow為auto*/
}
#scroller {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.iScrollVerticalScrollbar {
/*設置凹槽的樣式*/
position: absolute;
z-index: 10;
width: 5px;
top: 0;
right: 0;
overflow: hidden;
height: 100%;
border-radius: 10px;
}
.iScrollIndicator {
/*設置滾動條的樣式*/
width: 100%;
background: orange;
border-radius: 10px;
height: 30%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<div class="up" id="up">下拉刷新</div>
<ul class="list" id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
<div class="down" id="down">上拉加載更多</div>
</div>
</div>
<script type="text/javascript" src="iscroll5.js"></script>
<script type="text/javascript" src="iscroll-probe.js"></script>
<script type="text/javascript">
function load() {
var myScroll = new IScroll("#wrapper", {
useTransition: true,
useTransform: true,
mouseWheel: true,
scrollbars: "custom",//只有該屬性的值為"custom"，才能通過.iScrollVerticalScrollbar和.iScrollIndicator設置凹槽和滾動條的樣式
interactiveScrollbars: true,
resizeScrollbars: false,//當這個屬性設置為否時,才可以通過.iScrollIndicator改變滾動條(不是凹槽的的寬和高）
probeType: 3//這個值設置為3而且必須引入iscroll-probe.js才能觸發onscroll事件
});
var down = document.getElementById("down");
var up = document.getElementById("up");
var scroller = document.getElementById("scroller");
var list = document.getElementById("list");
var step = 3;//上拉加載時的動態創建的li的個數
var max = 30;//li的最大個數
var flag = false;//滾動條滾動到最底部的標識
var end = false;//數據加載完成后的標識
myScroll.on("scroll", function () {
if (parseInt(this.y) >= 0 && this.directionY == -1) {//down
up.style.display = "block";
if (parseInt(this.y) == 0) {
up.style.display = "none";
this.refresh();
}
}
if (parseInt(this.y) == this.maxScrollY) {
if (end) {
return;
}
var self = this;
setTimeout(function () {
down.style.display = "block";
self.y -= (list.children[0].clientHeight) * step;
self.refresh();
flag = true;
if (list.children.length == max) {
down.innerHTML = "沒有更多數據";
flag = false;
setTimeout(function () {
down.style.display = "none";
self.refresh();//為了解決 down.style.display = "none";之后最下面有一行空白；
end = true;
}, 2000)
}
}, 1000);
}
if (flag && this.directionY == 1 && this.y < this.maxScrollY) {
if (end) {
return;
}
flag = false;
down.style.display = "none";
var fragment = document.createDocumentFragment();
var len = list.children.length;//每次上拉時動態獲取當前li的總個數
var num = max - len;//最大個數和總個數的差值
step = num <= step && num >= 0 ? num : step;//當兩個數的差值大于等于0小于等于step的時候，step等于兩者之差，否則step不變
for (var i = 0; i < step; i++) {
var li = document.createElement("li");
li.innerHTML = list.children.length + i + 1;
fragment.appendChild(li);
}
list.appendChild(fragment);
}
});
}
window.addEventListener("load", load, false);
</script>
</body>
</html>
關于iscroll5的相關屬性和方法，請參考http://blog.csdn.net/sweetsuzyhyf/article/details/44195549/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
#wrapper {
width: 100%;
}
.up, .down, li {
height: 49px;
line-height: 49px;
text-align: center;
}
.up {
display: none;
background-color: darkgrey;
color:#ffffff;
border-bottom: 1px solid lightgrey;
}
.down {
display: none;
background-color: darkgrey;
color: #ffffff;
}
li {
background-color: darkgrey;
border-bottom: 1px solid lightgrey;
}
#wrapper {
position: relative;
height: 500px;
background: #aaa;
overflow: hidden; /*iscroll不能設置overflow為auto*/
}
#scroller {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.iScrollVerticalScrollbar {
/*設置凹槽的樣式*/
position: absolute;
z-index: 10;
width: 5px;
top: 0;
right: 0;
overflow: hidden;
height: 100%;
border-radius: 10px;
}
.iScrollIndicator {
/*設置滾動條的樣式*/
width: 100%;
background: orange;
border-radius: 10px;
height: 30%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<div class="up" id="up">下拉刷新</div>
<ul class="list" id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
<div class="down" id="down">上拉加載更多</div>
</div>
</div>
<script type="text/javascript" src="iscroll5.js"></script>
<script type="text/javascript" src="iscroll-probe.js"></script>
<script type="text/javascript">
function load() {
var myScroll = new IScroll("#wrapper", {
useTransition: true,
useTransform: true,
mouseWheel: true,
scrollbars: "custom",//只有該屬性的值為"custom"，才能通過.iScrollVerticalScrollbar和.iScrollIndicator設置凹槽和滾動條的樣式
interactiveScrollbars: true,
resizeScrollbars: false,//當這個屬性設置為否時,才可以通過.iScrollIndicator改變滾動條(不是凹槽的的寬和高）
probeType: 3//這個值設置為3而且必須引入iscroll-probe.js才能觸發onscroll事件
});
var down = document.getElementById("down");
var up = document.getElementById("up");
var scroller = document.getElementById("scroller");
var list = document.getElementById("list");
var step = 3;//上拉加載時的動態創建的li的個數
var max = 30;//li的最大個數
var flag = false;//滾動條滾動到最底部的標識
var end = false;//數據加載完成后的標識
myScroll.on("scroll", function () {
if (parseInt(this.y) >= 0 && this.directionY == -1) {//down
up.style.display = "block";
if (parseInt(this.y) == 0) {
up.style.display = "none";
this.refresh();
}
}
if (parseInt(this.y) == this.maxScrollY) {
if (end) {
return;
}
var self = this;
setTimeout(function () {
down.style.display = "block";
self.y -= (list.children[0].clientHeight) * step;
self.refresh();
flag = true;
if (list.children.length == max) {
down.innerHTML = "沒有更多數據";
flag = false;
setTimeout(function () {
down.style.display = "none";
self.refresh();//為了解決 down.style.display = "none";之后最下面有一行空白；
end = true;
}, 2000)
}
}, 1000);
}
if (flag && this.directionY == 1 && this.y < this.maxScrollY) {
if (end) {
return;
}
flag = false;
down.style.display = "none";
var fragment = document.createDocumentFragment();
var len = list.children.length;//每次上拉時動態獲取當前li的總個數
var num = max - len;//最大個數和總個數的差值
step = num <= step && num >= 0 ? num : step;//當兩個數的差值大于等于0小于等于step的時候，step等于兩者之差，否則step不變
for (var i = 0; i < step; i++) {
var li = document.createElement("li");
li.innerHTML = list.children.length + i + 1;
fragment.appendChild(li);
}
list.appendChild(fragment);
}
});
}
window.addEventListener("load", load, false);
</script>
</body>
</html>
關于iscroll5的相關屬性和方法，請參考http://blog.csdn.net/sweetsuzyhyf/article/details/44195549/
轉載于:https://www.cnblogs.com/leilei-frontEnd/p/5802835.html
總結
以上是生活随笔為你收集整理的iscroll5实现一个下拉刷新上拉加载的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CodeVs1519 过路费
- 下一篇： IOS开发UI篇—导航控制器属性和基本使