1.引入文件:
<script src="js/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="iscroll.js"></script>
2.加入css样式:
<style type="text/css" media="all">
#show {
display: none;
}
#wrapper {
position: absolute;
z-index: 1;
/* top:100px;
left:12%;*/
height: 100%;
width: 100%;
/* height:400px;
width:80%;*/
background: #aaa;
/*border:1px red solid;*/
}
#scroller {
position: absolute;
z-index: 1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
padding: 0;
}
#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;
}
/**
*
* Pull down styles
*
*/
#pullDown,
#pullUp {
background: #fff;
height: 40px;
line-height: 40px;
padding: 5px 10px;
border-bottom: 1px solid #ccc;
font-weight: bold;
font-size: 14px;
color: #888;
}
#pullDown .pullDownIcon,
#pullUp .pullUpIcon {
display: block;
float: left;
width: 40px;
height: 40px;
background: url("pull-icon@2x.png") 0 0 no-repeat;
-webkit-background-size: 40px 80px;
background-size: 40px 80px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 250ms;
}
#pullDown .pullDownIcon {
-webkit-transform: rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
-webkit-transform: rotate(-180deg) translateZ(0);
}
#pullDown.flip .pullDownIcon {
-webkit-transform: rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
-webkit-transform: rotate(0deg) translateZ(0);
}
#pullDown.loading .pullDownIcon,
#pullUp.loading .pullUpIcon {
background-position: 0 100%;
-webkit-transform: rotate(0deg) translateZ(0);
-webkit-transition-duration: 0ms;
-webkit-animation-name: loading;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg) translateZ(0);
}
to {
-webkit-transform: rotate(360deg) translateZ(0);
}
}
</style>
3.dom结构:
<p id="show"></p>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
</div>
<div id="thelist" class="chose-schedule">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
</div>
<div id="pullUp" style="display:none;">
<span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
</div>
</div>
</div>
4.js代码:
<script type="text/javascript">
var myScroll,
pullDownEl,
pullDownOffset,
pullUpEl,
pullUpOffset,
generatedCount = 0;
var newarr = DATA.datas
function pullDownAction() {
setTimeout(function() { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
// for (i=0; i<5; i++) {
// li = document.createElement('li');
// li.innerText = 'Generated row ' + (++generatedCount);
// el.insertBefore(li, el.childNodes[0]);
// }
document.getElementById("pullUp").style.display = "";
myScroll.refresh();
}, 1000);
}
function pullUpAction() {
setTimeout(function() {
var el, li, i;
el = document.getElementById('thelist');
// for (i = 0; i < 1; i++) {
// li = document.createElement('li');
// li.innerText = 'Generated row ' + (++generatedCount);
// el.appendChild(li, el.childNodes[0]);
// }
myScroll.refresh();
}, 1000);
}
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = 10;
//pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll('wrapper', {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function() {
//that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY;
//that.minScrollY = -that.options.topOffset || 0;
//alert(this.wrapperH);
//alert(this.scrollerH);
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
}
if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
document.getElementById("pullUp").style.display = "none";
document.getElementById("show").innerHTML = "onRefresh: up[" + pullUpEl.className + "],down[" + pullDownEl.className + "],Y[" + this.y + "],maxScrollY[" + this.maxScrollY + "],minScrollY[" + this.minScrollY + "],scrollerH[" + this.scrollerH + "],wrapperH[" + this.wrapperH + "]";
},
onScrollMove: function() {
document.getElementById("show").innerHTML = "onScrollMove: up[" + pullUpEl.className + "],down[" + pullDownEl.className + "],Y[" + this.y + "],maxScrollY[" + this.maxScrollY + "],minScrollY[" + this.minScrollY + "],scrollerH[" + this.scrollerH + "],wrapperH[" + this.wrapperH + "]";
if (this.y > 0) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
}
if (this.y < 0 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
if (this.scrollerH < this.wrapperH && this.y < (this.minScrollY - pullUpOffset) || this.scrollerH > this.wrapperH && this.y < (this.maxScrollY - pullUpOffset)) {
document.getElementById("pullUp").style.display = "";
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
}
if (this.scrollerH < this.wrapperH && this.y > (this.minScrollY - pullUpOffset) && pullUpEl.className.match('flip') || this.scrollerH > this.wrapperH && this.y > (this.maxScrollY - pullUpOffset) && pullUpEl.className.match('flip')) {
document.getElementById("pullUp").style.display = "none";
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
},
onScrollEnd: function() {
document.getElementById("show").innerHTML = "onScrollEnd: up[" + pullUpEl.className + "],down[" + pullDownEl.className + "],Y[" + this.y + "],maxScrollY[" + this.maxScrollY + "],minScrollY[" + this.minScrollY + "],scrollerH[" + this.scrollerH + "],wrapperH[" + this.wrapperH + "]";
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction(); // Execute custom function (ajax call?)
}
if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
pullUpAction(); // Execute custom function (ajax call?)
}
}
});
//setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false);
</script>
scroll的一些方法的应用:
(1). myScroll.refresh(); //在DOM树发生变化时,应该调用此方法。例如搜索后,dom渲染后,刷新滚动条的高度,防止前一个搜索结果太多,后一个搜索结果少,导致后一个滚动条太长,看不见搜索结果的问题
(2)iScroll还提供了scrollTo, scrollToElement和scrollToPage三个方法让你能够通过javascript来控制滚动效果。
scrollTo(x, y, time, relative):在指定的time时间内让内容滚动条x/y的位置。如myScroll.scrollTo(0, -100, 200) 在200毫秒内Y轴向下滚动100像素。 myScroll.scrollTo(0, 10, 200, true)可以实现相对当前位置在200毫秒内Y轴向上滚动10像素的效果。
scrollToElement(element, time):在指定的时间内滚动到指定的元素。如myScroll.scrollToElement('li:nth-child(10)', 100) 在100毫秒内滚动到第10个li元素的位置。第1个参数可以用CSS3中的选择器来筛选元素。
snapToPage(pageX, pageY, time):在200毫秒内从第1页滚动到第2页(0代表第1页,1代表第2页)。这个使用SNAP功能的时候可以调用这个函数。
(3)detroy() :完全消除myscroll及其占用的内存空间
myscroll.destroy();