iscoll移动端滚动加载数据 博客分类： mobile 框架 html
程序员文章站
2024-03-13 21:47:04
...
<!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="./js/fastclick-jquery.js"></script>
<script type="text/javascript" src="./js/iscroll-probe.js"></script>
<script type="text/javascript">
var items_per_page = 10;
var scroll_in_progress = false;
var myScroll;
var pageNo = 0; //初始化，默认加载页数
function myLoadContent(){
if(pageNo=='end'){
return;
}
if(pageNo == 1){
page = page1;
list = page.pageData;
renderRow(list);
$('#wrapper').css({left: 0});
if(list.length >= items_per_page){
//初始化scoller
initScoller();
}else{
$('#wrapper .pullUp span').hide();
}
}
if(pageNo == 2){
page = page2;
list = page.pageData;
renderRow(list);
myScroll.refresh();
}
if(pageNo >=3){
pageNo='end'
}
}
function renderRow(list){
for(var i=0;i<list.length;i++){
var item = list[i];
$('#wrapper > #scroller > ul').append('<li>数据-'+item.id+'</li>');
}
}
function initScoller(){
pullUpEl = document.querySelector('#wrapper .pullUp');
if (pullUpEl) {
pullUpOffset = pullUpEl.offsetHeight;
} else {
pullUpOffset = 0;
}
var 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 () {
if(pageNo=='end'){
$('.pullUp').addClass('loading').html('<span class="pullUpIcon"> </span><span class="pullUpLabel">已经是最后一条了</span>');
return;
}
scroll_in_progress = true;
console.log("this.y="+this.y+";this.maxScrollY="+this.maxScrollY);
var testF1 = (this.y <= (this.maxScrollY + 200));
var testF2 = !pullUpEl.className.match('loading');
var r = testF1 && pullUpEl && testF2 ;
console.log("testF1="+testF1+";testF2="+testF2+";r="+r);
if(r) {
$('.pullUp').addClass('loading').html('<span class="pullUpIcon"> </span><span class="pullUpLabel">加载数据中。。。</span>');
pageNo ++;
myLoadContent();
// pullUpAction();
}
});
myScroll.on('scrollEnd', function () {
console.log('scroll ended');
setTimeout(function () {
scroll_in_progress = false;
}, 100);
$(pullUpEl).removeClass('loading').html('');
});
}
//初始化数据
function loaded() {
//load_content();
pageNo = 1;
myLoadContent();
}
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
var page1 = {pageNo:0,pageSize:10,
pageData:[
{id:1,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:2,createdAt:'2018-01-10 10:10',action:'取款成功',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款成功'},
{id:3,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:4,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:5,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:6,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:7,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:8,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:9,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:10,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'}
]
}
var page2 = {pageNo:1,pageSize:10,
pageData:[
{id:11,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:12,createdAt:'2018-01-10 10:10',action:'取款成功',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款成功'},
{id:13,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:14,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:15,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:16,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:17,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:18,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:19,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:20,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'}
]
}
</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>