在移動端開發中經常會遇到上拉加載下拉刷新的分頁的需求，本人在用jquery weui框架中的相應擴展組件的時候發現不太好用，於是有找了一下，發現了一個非常不錯的組件iscroll4.js,現在好像官網不能進了，這裏附一個下載鏈接:下載iscroll4.js .
查看演示:iscrollDemo
我們先來看一下屬性。
屬性：
scrollbars: false 是否顯示滾動條。默認爲false;也可以單獨設置橫向和縱向
fadeScrollbars:true 滾動條淡入淡出效果,當然前提是你滾動條顯示了。默認爲false;
interactiveScrollbars 是否拖動滾動條。默認爲false;
resizeScrollbars 滾動條的長度是按照比例設置的，如果想要固定尺寸，可以設置爲flase;默認爲true;
bounce: false 滾動到達容器邊界時是否執行反彈動畫。默認爲true;
click:true iScroll禁止默認鼠標的點擊行爲，如果要使用設置true;默認爲false;
。。。。。。不在一 一列出,
下面看一下注意事項：
1：滾動容器需要是絕對定位,及position:absolute;
2：滾動容器裏面只有第一個元素能滾動，因而一般滾動容器裏面一般只放一個元素，在這個元素裏面再顯示數據
3：上拉的時候回彈回，每次在更新完成滾動容器裏面的數據之後需要調用refresh();方法，可以消除此問題
下面來看例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>isCrollDemo</title>
<style>
html,
body {
height: 100%;
}
body {
background-color: #f5fafe;
color: #000;
font-family: "微軟雅黑";
font-size: 13px;
}
li {
text-align: center;
list-style: none;
margin-right: 40px;
}
#wrapper {
position: absolute;
top: 1px;
bottom: 1px;
left: 0;
width: 100%
}
#scroller li {
height: 60px;
line-height: 60px;
background: #ecf6ff;
margin-top: 10px
}
#pullDown,
#pullUp {
padding: 0 10px;
height: 30px;
line-height: 30px;
color: #888;
text-align: center
}
</style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownLabel">下拉刷新</span>
</div>
<!-- </ul> -->
<ul id="ulData">
<li> 1111</li>
<li> 1111</li>
</ul>
<div id="pullUp" class="weui-loadmore">
<span class="pullUpLabel weui-loadmore__tips">上拉加載更多</span>
</div>
</div>
</div>
<script src="js/iscroll4.js"></script>
<script>
var mScroll;
var isRefresh = true;
var p = 1; //當前頁碼
var onePageCount = 20; //每頁顯示多少個
window.onload = function() {
mScroll = PullDownAddUP("wrapper", function(loadType) {
if (loadType == "refresh") { //下拉刷新
isRefresh = true;
} else { //上拉加載
isRefresh = false;
}
loadData();
});
loadData();
}
function loadData() {
if (isRefresh) {
p = 1;
document.getElementById("ulData").innerHTML = "";
} else {
p++;
}
setTimeout(function() {
var htm = document.getElementById("ulData").innerHTML;
for (var i = onePageCount * (p - 1); i < onePageCount * p; i++) {
htm += '<li> ' + '我是第' + (i + 1) + '個,屬於第' + p + '頁' + '</li>';
}
document.getElementById("ulData").innerHTML = htm;
mScroll.refresh(); //數據加載完成一定要調用此方法,否則上拉會反彈
}, 1000);
}
/**
*此方法可以寫到公用的類裏面，然後調用 ,
* 下拉刷新的id一定要是 【pullDown】，上拉加載的id一定要是【pullUp】
*
* 用iScroll4.js實現上拉加載和下拉刷新
* @param wrapperId 滾動容器的 elementId
* @param callbc 滾動回調，參數：refresh 表示下拉刷新，loadmore 表示上拉加載
*
* @return myScroll 將對象返回（注意，在執行完成數據刷新/加載之後要調用 myScroll.refresh(),否則會上拉會反彈）
*/
function PullDownAddUP(wrapperId, callbc) {
var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;
var isRefresh = true,
isLoadMore = true;
var option = {};
option.hScrollbar = false;//縱向滾動條
option.vScrollbar = false;//橫向滾動條
option.useTransition = true;
//動畫部分
try {
pullDownEl = document.getElementById('pullDown');
pullUpOffset = pullUpEl.offsetHeight;
} catch (e) {
isRefresh = false;
}
try {
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
} catch (e) {
isLoadMore = false;
}
if (isRefresh) {
if (isLoadMore) {
option.onRefresh = function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多';
}
};
option.onScrollMove = function() {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '釋放刷新';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '釋放加載';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';
this.maxScrollY = pullUpOffset;
}
};
option.onScrollEnd = function() {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加載中';
callbc("refresh"); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加載中';
callbc("loadmore"); // Execute custom function (ajax call?)
}
};
} else {
option.onRefresh = function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
}
};
option.onScrollMove = function() {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '釋放刷新';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;
}
};
option.onScrollEnd = function() {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加載中';
callbc("refresh"); // Execute custom function (ajax call?)
}
};
}
} else {
if (isLoadMore) {
option.onRefresh = function() {
if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多';
}
};
option.onScrollMove = function() {
if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '釋放加載';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';
this.maxScrollY = pullUpOffset;
}
};
option.onScrollEnd = function() {
if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加載中';
callbc("loadmore"); // Execute custom function (ajax call?)
}
};
} else {
option.onRefresh = function() {
//if (pullDownEl.className.match('loading')) {
// pullDownEl.className = '';
// pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
//}
};
}
}
myScroll = new iScroll('wrapper', option);
return myScroll;
}
</script>
</body>
</html>
以上就是示例代碼，可以拷貝出來直接測試。