iscoll移动端滚动加载数据

2018-01-11 12:52:15来源:http://01jiangwei01.iteye.com作者:01jiangwei01人点击

分享

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta
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 >&nbsp;</span><span >已经是最后一条了</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 >&nbsp;</span><span >加载数据中。。。</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 >iScroll</div>
<div >
<div >
<!--
<div >
<span >&nbsp;</span>
<span >Pull down to refresh...</span>
</div>
-->
<ul></ul>
<div ></div>
</div>
</div>
<div ></div>
</body>
</html> my-iscoll-demo.zip (128 KB) 下载次数: 0

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台