iscroll5 html5 pull to refresh, pull to load 完整demo
陶山
需要引入jquery iscroll js
<!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-5 DEMO: Pull to Refresh + Infinite Next Page load</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iscroll-probe.js"></script>
<script type="text/javascript">
var items_per_page = 10;
var scroll_in_progress = false;
var myScroll;
load_content = function(refresh, next_page) {
// This is a DEMO function which generates DEMO content into the scroller.
// Here you should place your AJAX request to fetch the relevant content (e.g. $.post(...))
console.log(refresh, next_page);
setTimeout(function() { // This immitates the CALLBACK of your AJAX function
if (!refresh) {
// Loading the initial content
$('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row initial content</li>');
} else if (refresh && !next_page) {
// Refreshing the content
$('#wrapper > #scroller > ul').html('');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row Refreshed</li>');
} else if (refresh && next_page) {
// Loading the next-page content and refreshing
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
$('#wrapper > #scroller > ul').append('<li>Pretty row X</li>');
}
if (refresh) {
myScroll.refresh();
pullActionCallback();
} else {
if (myScroll) {
myScroll.destroy();
$(myScroll.scroller).attr('style', ''); // Required since the styles applied by IScroll might conflict with transitions of parent layers.
myScroll = null;
}
trigger_myScroll();
}
}, 1000);
};
function pullDownAction() {
load_content('refresh');
$('#wrapper > #scroller > ul').data('page', 1);
// Since "topOffset" is not supported with iscroll-5
$('#wrapper > .scroller').css({top:0});
}
function pullUpAction(callback) {
if ($('#wrapper > #scroller > ul').data('page')) {
var next_page = parseInt($('#wrapper > #scroller > ul').data('page'), 10) + 1;
} else {
var next_page = 2;
}
load_content('refresh', next_page);
$('#wrapper > #scroller > ul').data('page', next_page);
if (callback) {
callback();
}
}
function pullActionCallback() {
if (pullDownEl && pullDownEl.className.match('loading')) {
pullDownEl.className = 'pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh';
myScroll.scrollTo(0, parseInt(pullUpOffset)*(-1), 200);
} else if (pullUpEl && pullUpEl.className.match('loading')) {
$('.pullUp').removeClass('loading').html('');
}
}
var pullActionDetect = {
count:0,
limit:10,
check:function(count) {
if (count) {
pullActionDetect.count = 0;
}
// Detects whether the momentum has stopped, and if it has reached the end - 200px of the scroller - it trigger the pullUpAction
setTimeout(function() {
if (myScroll.y <= (myScroll.maxScrollY + 200) && pullUpEl && !pullUpEl.className.match('loading')) {
$('.pullUp').addClass('loading').html('<span class="pullUpIcon"> </span><span class="pullUpLabel">Loading...</span>');
pullUpAction();
} else if (pullActionDetect.count < pullActionDetect.limit) {
pullActionDetect.check();
pullActionDetect.count++;
}
}, 200);
}
}
function trigger_myScroll(offset) {
pullDownEl = document.querySelector('#wrapper .pullDown');
if (pullDownEl) {
pullDownOffset = pullDownEl.offsetHeight;
} else {
pullDownOffset = 0;
}
pullUpEl = document.querySelector('#wrapper .pullUp');
if (pullUpEl) {
pullUpOffset = pullUpEl.offsetHeight;
} else {
pullUpOffset = 0;
}
if ($('#wrapper ul > li').length < items_per_page) {
// If we have only 1 page of result - we hide the pullup and pulldown indicators.
$('#wrapper .pullDown').hide();
$('#wrapper .pullUp span').hide();
offset = 0;
} else if (!offset) {
// If we have more than 1 page of results and offset is not manually defined - we set it to be the pullUpOffset.
offset = pullUpOffset;
}
myScroll = new IScroll('#wrapper', {
probeType:1, tap:true, click:false, preventDefaultException:{tagName:/.*/}, mouseWheel:true, scrollbars:true, fadeScrollbars:true, interactiveScrollbars:false, keyBindings:false,
deceleration:0.0002,
startY:(parseInt(offset)*(-1))
});
myScroll.on('scrollStart', function () {
scroll_in_progress = true;
});
myScroll.on('scroll', function () {
scroll_in_progress = true;
if ($('#wrapper ul > li').length >= items_per_page) {
if (this.y >= 5 && pullDownEl && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'pullDown flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh';
this.minScrollY = 0;
} else if (this.y <= 5 && pullDownEl && pullDownEl.className.match('flip')) {
pullDownEl.className = 'pullDown';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh';
this.minScrollY = -pullDownOffset;
}
console.log(this.y);
pullActionDetect.check(0);
}
});
myScroll.on('scrollEnd', function () {
console.log('scroll ended');
setTimeout(function() {
scroll_in_progress = false;
}, 100);
if ($('#wrapper ul > li').length >= items_per_page) {
if (pullDownEl && pullDownEl.className.match('flip')) {
pullDownEl.className = 'pullDown loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction();
}
// We let the momentum scroll finish, and if reached the end - loading the next page
pullActionDetect.check(0);
}
});
// In order to prevent seeing the "pull down to refresh" before the iScoll is trigger - the wrapper is located at left:-9999px and returned to left:0 after the iScoll is initiated
setTimeout(function() {
$('#wrapper').css({left:0});
}, 100);
}
function loaded() {
load_content();
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</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 */
}
#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:9999px; /* Not a must - can be 0 - but it makes the appearance of the content a bit nicer */
width: 100%;
background: #ccc;
overflow: hidden;
}
#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: 80px;
line-height: 80px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
.pullDownLabel, .pullUpLabel {color:#999}
.pullDown, .pullUp {background:#fff;height:40px;line-height:40px;font-weight:bold;font-size:0.8em;color:#888}
.pullDown .pullDownIcon, .pullUp .pullUpIcon {display:block;float:left;opacity:0.4;width:40px;height:40px;background:url(pull_to_refresh.png) 0 0 no-repeat;-webkit-background-size:40px 80px;-ms-background-size:40px 80px; background-size:40px 80px;-webkit-transition-property:-webkit-transform;-ms-transition-property:-webkit-transform;-webkit-transition-duration:250ms;-ms-transition-duration:250ms}
.pullDown .pullDownIcon {-webkit-transform:rotate(0deg) translateZ(0);-ms-transform:rotate(0deg) translateZ(0)}
.pullUp .pullUpIcon {-webkit-transform:rotate(-180deg) translateZ(0);-ms-transform:rotate(-180deg) translateZ(0)}
.pullDown.flip .pullDownIcon {-webkit-transform:rotate(-180deg) translateZ(0);-ms-transform:rotate(-180deg) translateZ(0)}
.pullUp.flip .pullUpIcon {-webkit-transform:rotate(0deg) translateZ(0);-ms-transform:rotate(0deg) translateZ(0)}
.pullDown.loading .pullDownIcon, .pullUp.loading .pullUpIcon {background-position:0 100%;-webkit-transform:rotate(0deg) translateZ(0);-ms-transform:rotate(0deg) translateZ(0);-webkit-transition-duration:0ms;-ms-transition-duration:0ms;-webkit-animation-name:loading;-ms-animation-name:loading;-webkit-animation-duration:1s;-ms-animation-duration:1s;-webkit-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-ms-animation-timing-function:linear}
@-webkit-keyframes loading {
from {-webkit-transform:rotate(0deg) translateZ(0)}
to {-webkit-transform:rotate(360deg) translateZ(0)}
}
@-ms-keyframes loading {
from {-ms-transform:rotate(0deg) translateZ(0)}
to {-ms-transform:rotate(360deg) translateZ(0)}
}
</style>
</head>
<body onload="loaded()">
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<div class="pullDown">
<span class="pullDownIcon"> </span>
<span class="pullDownLabel">Pull down to refresh...</span>
</div>
<ul></ul>
<div class="pullUp"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
类似资料：