iScroll
2014-07-18 16:45
162 查看
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- <meta http-equiv="Cache-Control" content="no-Cache"/> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="<@path file='/asset/common/css/list.css'/>"></link>
<link type="text/css" rel="stylesheet" href="<@path file='/asset/common/css/jquery.mobile-1.3.2.min.css'/>"></link>
<script type="text/javascript" src="<@path file='/asset/common/js/jquery-1.8.3.min.js'/>"></script>
<script type="text/javascript" src="<@path file='/asset/common/js/jquery.mobile-1.3.2.min.js' />"></script>
<script type="text/javascript" src="<@path file='/asset/common/js/pages/ws/iscroll.js' />"></script>
<script type="text/javascript" src="<@path file='/asset/common/js/pages/ws/list.js' />"></script>
<script type="text/javascript">
var getPubAccountHistoryMsgListUrl = "<@ajax code='com.zte.ixin.portal.business.BusinessCenter4Ws.ws__getPubAccountHistoryMsgList' />";
</script>
<style>
* {margin:0;padding:0;list-style-type:none;font-family:"微软雅黑",Helvetica, sans-serif;font-size:100%;}
body {background-color:#efeff4;}
a, area {blr:expression(this.onFocus=this.blur());text-decoration:none;color:#000;font-size:1em;}
a:focus {outline: none;}
.content_list, .content_body {display:block;width:97%; margin:auto;}
.content_list li {display:block;height:3em;border-top:1px solid #d9d9d9; height:64px; }
.content_list a {position:relative;display:block;height:44px; line-height:44px; color:#4d4d4d;}
.content_list img {float:right; top:0.5em; width:3em;height:3em;position:relative; overflow:hidden;}
.content_list_item {font-size:1em; height:4em;line-height:1.5em;padding-right:0.5em;color:#4d4d4d;display:table-cell;vertical-align:middle; text-align:justify;position:relative;}
.content_body {font-size:1em;line-height:1.5em;color:#4d4d4d;padding:0.5em;text-align:justify;}
.content_body a {color:#4d4d4d;}
.multi, .singel{width:97.5%; margin:auto; margin-top:0.5em; margin-bottom:0.5em;}
.i_xin_content {width:100%;border:1px solid #E4E4E4;border-radius:0.5em;overflow:hidden;background-color:#FFF;padding-bottom:0.5em;}
.content_head {width:97%;height:9em;padding-top:0.5em;margin:auto;position:relative;overflow:hidden;}
.content_head img {width:100%;}
.content_head_title {color:#FFF;padding:0.5em;width:100%;position:absolute;bottom:0px;background:#000;filter:alpha(opacity=75);-moz-opacity:0.75;-khtml-opacity:0.75;opacity:0.75;"}
</style>
</head>
<body>
<input type="hidden" id="accountCode" name="accountCode" value="${p.accountCode!}">
<div id="header">
</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown" class="idle">
<span class="pullDownIcon"></span>
<span class="pullDownLabel">Pull down to refresh...</span>
</div>
<ul id="thelist">
</ul>
<div id="pullUp" class="idle">
<span class="pullUpIcon"></span>
<span class="pullUpLabel">Pull up to refresh...</span>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
/*chrome*/
-webkit-user-select:none;
-webkit-text-size-adjust:none;
/*firefox*/
-moz-user-select:none;
-moz-text-size-adjust:none;
/*opera*/
-o-user-select:none;
-o-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute; z-index:2;
top:0; left:0;
width:100%;
height:45px;
line-height:45px;
background-color:#d51875;
/*chrome*/
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
/*ff*/
background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
/*opera*/
background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position:absolute; z-index:2;
bottom:0; left:0;
width:100%;
height:48px;
background-color:#222;
/*chrome*/
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
/*ff*/
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
/*opera*/
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
/*chrome*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
/*ff*/
-moz-tap-highlight-color:rgba(0,0,0,0);
/*opera*/
-o-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(images/pull-icon@2x.png) 0 0 no-repeat;
background-size:40px 80px;
/*chrome*/
-webkit-background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:250ms;
/*ff*/
-moz-background-size:40px 80px;
-moz-transition-property:-moz-transform;
-moz-transition-duration:250ms;
/*opera*/
-o-background-size:40px 80px;
-o-transition-property:-o-transform;
-o-transition-duration:250ms;
}
#pullDown.idle .pullDownIcon {
background-position:0 0;
/*chrome*/
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-animation-name:idle;
-webkit-animation-duration:0;
/*ff*/
-moz-transform:rotate(0deg) translateZ(0);
-moz-animation-name:idle;
-moz-animation-duration:0;
/*opera*/
-o-transform:rotate(0deg) translateZ(0);
-o-animation-name:idle;
-o-animation-duration:0;
}
#pullUp.idle .pullUpIcon {
background-position:0 0;
/*chrome*/
-webkit-transform:rotate(-180deg) translateZ(0);
/*ff*/
-moz-transform:rotate(-180deg) translateZ(0);
/*opera*/
-o-transform:rotate(-180deg) translateZ(0);
}
#pullDown.flip .pullDownIcon {
background-position:0 0;
/*chrome*/
-webkit-transform:rotate(-180deg) translateZ(0);
-webkit-animation-name:idle;
-webkit-animation-duration:0;
/*ff*/
-moz-transform:rotate(-180deg) translateZ(0);
-moz-animation-name:idle;
-moz-animation-duration:0;
/*opera*/
-o-transform:rotate(-180deg) translateZ(0);
-o-animation-name:idle;
-o-animation-duration:0;
}
#pullUp.flip .pullUpIcon {
background-position:0 0;
/*chrome*/
-webkit-transform:rotate(0deg) translateZ(0);
/*ff*/
-moz-transform:rotate(0deg) translateZ(0);
/*opera*/
-o-transform:rotate(0deg) translateZ(0);
}
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:0 100%;
/*chrome*/
-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;
/*ff*/
-moz-transform:rotate(0deg) translateZ(0);
-moz-transition-duration:0ms;
-moz-animation-name:loading;
-moz-animation-duration:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
/*opera*/
-o-transform:rotate(0deg) translateZ(0);
-o-transition-duration:0ms;
-o-animation-name:loading;
-o-animation-duration:2s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
}
/*chrome*/
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
}
@-webkit-keyframes idle {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(0deg) translateZ(0); }
}
/*ff*/
@-moz-keyframes loading {
from { -moz-transform:rotate(0deg) translateZ(0); }
to { -moz-transform:rotate(360deg) translateZ(0); }
}
@-moz-keyframes idle {
from { -moz-transform:rotate(0deg) translateZ(0); }
to { -moz-transform:rotate(0deg) translateZ(0); }
}
/*opera*/
@-o-keyframes loading {
from { -o-transform:rotate(0deg) translateZ(0); }
to { -o-transform:rotate(360deg) translateZ(0); }
}
@-o-keyframes idle {
from { -o-transform:rotate(0deg) translateZ(0); }
to { -o-transform:rotate(0deg) translateZ(0); }
}
var accountCode = "";
var OFFSET = 10;
var page = 1;
var PAGESIZE = 10;
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
var maxScrollY = 0;
var hasMoreData = false;
// window.addEventListener("load",loaded,false);
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
document.addEventListener('DOMContentLoaded', function() {
$(document).ready(function() {
loaded();
});
//setTimeout(loaded, 200);
}, false);
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
hasMoreData = false;
$("#pullUp").hide();
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
page = 1;
accountCode = $("#accountCode").val();
params = {"accountCode": accountCode, "pageIndex":page, "pageSize":PAGESIZE};
$.ajax({
type : "POST",
dataType : "json",
url : getPubAccountHistoryMsgListUrl,
data : params,
success : function(data) {
if (data.result == "success") {
$("#thelist").show();
if (data.rtnMap.dailyIncome.rowsCount< PAGESIZE) {
hasMoreData = false;
$("#pullUp").hide();
} else {
hasMoreData = true;
$("#pullUp").show();
}
myScroll = new iScroll('wrapper', {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = 'idle';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
else if (pullUpEl.className.match('loading')) {
pullUpEl.className = 'idle';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
},
onScrollMove: function() {
if (this.y > OFFSET && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < OFFSET && pullDownEl.className.match('flip')) {
pullDownEl.className = 'idle';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
if (this.y < (maxScrollY - pullUpOffset - OFFSET) && !pullUpEl.className.match('flip')) {
if (hasMoreData) {
this.maxScrollY = this.maxScrollY - pullUpOffset;
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
}
} else if (this.y > (maxScrollY - pullUpOffset - OFFSET) && pullUpEl.className.match('flip')) {
if (hasMoreData) {
this.maxScrollY = maxScrollY;
pullUpEl.className = 'idle';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
}
},
onScrollEnd: function() {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
page=1;
getPageData(page);
}
else if (hasMoreData && pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
page++;
getPageData(page);
}
}
});
$("#thelist").empty();
fillPageData(data.rtnMap.dailyIncome.items);
}
}
});
}
function getPageData(page)
{
$.ajax({
type : "POST",
dataType : "json",
url : getPubAccountHistoryMsgListUrl,
data : {"accountCode": accountCode, "pageIndex":page, "pageSize":PAGESIZE},
success : function(data) {
if (data.result == "success") {
if (page==1) {
$("#thelist").empty();
}
if (data.rtnMap.dailyIncome.rowsCount< PAGESIZE) {
hasMoreData = false;
$("#pullUp").hide();
} else {
hasMoreData = true;
$("#pullUp").show();
}
fillPageData(data.rtnMap.dailyIncome.items);
}
}
});
}
function fillPageData(items)
{
for (var i = 0; i < items.length; i++) {
//4:图文消息
if(items[i].type==4){
$("#thelist").append(items[i].content);
}
//3:语音
else if(items[i].type==3){
$("#thelist").append('<li>' + "【语音消息】" + '</li>');
}
//2:图片消息
else if(items[i].type==2){
$("#thelist").append('<li class=\"i_xin_content\">' +"<img src='"+items[i].content+"' />" + '</li>');
}
//1:文本消息
else{
$("#thelist").append('<li>' + items[i].content + '</li>');
}
}
myScroll.refresh();
if (hasMoreData) {
myScroll.maxScrollY = myScroll.maxScrollY + pullUpOffset;
} else {
myScroll.maxScrollY = myScroll.maxScrollY;
}
maxScrollY = myScroll.maxScrollY;
}
<html>
<head>
<title></title>
<!-- <meta http-equiv="Cache-Control" content="no-Cache"/> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="<@path file='/asset/common/css/list.css'/>"></link>
<link type="text/css" rel="stylesheet" href="<@path file='/asset/common/css/jquery.mobile-1.3.2.min.css'/>"></link>
<script type="text/javascript" src="<@path file='/asset/common/js/jquery-1.8.3.min.js'/>"></script>
<script type="text/javascript" src="<@path file='/asset/common/js/jquery.mobile-1.3.2.min.js' />"></script>
<script type="text/javascript" src="<@path file='/asset/common/js/pages/ws/iscroll.js' />"></script>
<script type="text/javascript" src="<@path file='/asset/common/js/pages/ws/list.js' />"></script>
<script type="text/javascript">
var getPubAccountHistoryMsgListUrl = "<@ajax code='com.zte.ixin.portal.business.BusinessCenter4Ws.ws__getPubAccountHistoryMsgList' />";
</script>
<style>
* {margin:0;padding:0;list-style-type:none;font-family:"微软雅黑",Helvetica, sans-serif;font-size:100%;}
body {background-color:#efeff4;}
a, area {blr:expression(this.onFocus=this.blur());text-decoration:none;color:#000;font-size:1em;}
a:focus {outline: none;}
.content_list, .content_body {display:block;width:97%; margin:auto;}
.content_list li {display:block;height:3em;border-top:1px solid #d9d9d9; height:64px; }
.content_list a {position:relative;display:block;height:44px; line-height:44px; color:#4d4d4d;}
.content_list img {float:right; top:0.5em; width:3em;height:3em;position:relative; overflow:hidden;}
.content_list_item {font-size:1em; height:4em;line-height:1.5em;padding-right:0.5em;color:#4d4d4d;display:table-cell;vertical-align:middle; text-align:justify;position:relative;}
.content_body {font-size:1em;line-height:1.5em;color:#4d4d4d;padding:0.5em;text-align:justify;}
.content_body a {color:#4d4d4d;}
.multi, .singel{width:97.5%; margin:auto; margin-top:0.5em; margin-bottom:0.5em;}
.i_xin_content {width:100%;border:1px solid #E4E4E4;border-radius:0.5em;overflow:hidden;background-color:#FFF;padding-bottom:0.5em;}
.content_head {width:97%;height:9em;padding-top:0.5em;margin:auto;position:relative;overflow:hidden;}
.content_head img {width:100%;}
.content_head_title {color:#FFF;padding:0.5em;width:100%;position:absolute;bottom:0px;background:#000;filter:alpha(opacity=75);-moz-opacity:0.75;-khtml-opacity:0.75;opacity:0.75;"}
</style>
</head>
<body>
<input type="hidden" id="accountCode" name="accountCode" value="${p.accountCode!}">
<div id="header">
</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown" class="idle">
<span class="pullDownIcon"></span>
<span class="pullDownLabel">Pull down to refresh...</span>
</div>
<ul id="thelist">
</ul>
<div id="pullUp" class="idle">
<span class="pullUpIcon"></span>
<span class="pullUpLabel">Pull up to refresh...</span>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
/*chrome*/
-webkit-user-select:none;
-webkit-text-size-adjust:none;
/*firefox*/
-moz-user-select:none;
-moz-text-size-adjust:none;
/*opera*/
-o-user-select:none;
-o-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute; z-index:2;
top:0; left:0;
width:100%;
height:45px;
line-height:45px;
background-color:#d51875;
/*chrome*/
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
/*ff*/
background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
/*opera*/
background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position:absolute; z-index:2;
bottom:0; left:0;
width:100%;
height:48px;
background-color:#222;
/*chrome*/
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
/*ff*/
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
/*opera*/
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
/*chrome*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
/*ff*/
-moz-tap-highlight-color:rgba(0,0,0,0);
/*opera*/
-o-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(images/pull-icon@2x.png) 0 0 no-repeat;
background-size:40px 80px;
/*chrome*/
-webkit-background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:250ms;
/*ff*/
-moz-background-size:40px 80px;
-moz-transition-property:-moz-transform;
-moz-transition-duration:250ms;
/*opera*/
-o-background-size:40px 80px;
-o-transition-property:-o-transform;
-o-transition-duration:250ms;
}
#pullDown.idle .pullDownIcon {
background-position:0 0;
/*chrome*/
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-animation-name:idle;
-webkit-animation-duration:0;
/*ff*/
-moz-transform:rotate(0deg) translateZ(0);
-moz-animation-name:idle;
-moz-animation-duration:0;
/*opera*/
-o-transform:rotate(0deg) translateZ(0);
-o-animation-name:idle;
-o-animation-duration:0;
}
#pullUp.idle .pullUpIcon {
background-position:0 0;
/*chrome*/
-webkit-transform:rotate(-180deg) translateZ(0);
/*ff*/
-moz-transform:rotate(-180deg) translateZ(0);
/*opera*/
-o-transform:rotate(-180deg) translateZ(0);
}
#pullDown.flip .pullDownIcon {
background-position:0 0;
/*chrome*/
-webkit-transform:rotate(-180deg) translateZ(0);
-webkit-animation-name:idle;
-webkit-animation-duration:0;
/*ff*/
-moz-transform:rotate(-180deg) translateZ(0);
-moz-animation-name:idle;
-moz-animation-duration:0;
/*opera*/
-o-transform:rotate(-180deg) translateZ(0);
-o-animation-name:idle;
-o-animation-duration:0;
}
#pullUp.flip .pullUpIcon {
background-position:0 0;
/*chrome*/
-webkit-transform:rotate(0deg) translateZ(0);
/*ff*/
-moz-transform:rotate(0deg) translateZ(0);
/*opera*/
-o-transform:rotate(0deg) translateZ(0);
}
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:0 100%;
/*chrome*/
-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;
/*ff*/
-moz-transform:rotate(0deg) translateZ(0);
-moz-transition-duration:0ms;
-moz-animation-name:loading;
-moz-animation-duration:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
/*opera*/
-o-transform:rotate(0deg) translateZ(0);
-o-transition-duration:0ms;
-o-animation-name:loading;
-o-animation-duration:2s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
}
/*chrome*/
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
}
@-webkit-keyframes idle {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(0deg) translateZ(0); }
}
/*ff*/
@-moz-keyframes loading {
from { -moz-transform:rotate(0deg) translateZ(0); }
to { -moz-transform:rotate(360deg) translateZ(0); }
}
@-moz-keyframes idle {
from { -moz-transform:rotate(0deg) translateZ(0); }
to { -moz-transform:rotate(0deg) translateZ(0); }
}
/*opera*/
@-o-keyframes loading {
from { -o-transform:rotate(0deg) translateZ(0); }
to { -o-transform:rotate(360deg) translateZ(0); }
}
@-o-keyframes idle {
from { -o-transform:rotate(0deg) translateZ(0); }
to { -o-transform:rotate(0deg) translateZ(0); }
}
var accountCode = "";
var OFFSET = 10;
var page = 1;
var PAGESIZE = 10;
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
var maxScrollY = 0;
var hasMoreData = false;
// window.addEventListener("load",loaded,false);
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
document.addEventListener('DOMContentLoaded', function() {
$(document).ready(function() {
loaded();
});
//setTimeout(loaded, 200);
}, false);
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
hasMoreData = false;
$("#pullUp").hide();
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
page = 1;
accountCode = $("#accountCode").val();
params = {"accountCode": accountCode, "pageIndex":page, "pageSize":PAGESIZE};
$.ajax({
type : "POST",
dataType : "json",
url : getPubAccountHistoryMsgListUrl,
data : params,
success : function(data) {
if (data.result == "success") {
$("#thelist").show();
if (data.rtnMap.dailyIncome.rowsCount< PAGESIZE) {
hasMoreData = false;
$("#pullUp").hide();
} else {
hasMoreData = true;
$("#pullUp").show();
}
myScroll = new iScroll('wrapper', {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function() {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = 'idle';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
else if (pullUpEl.className.match('loading')) {
pullUpEl.className = 'idle';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
},
onScrollMove: function() {
if (this.y > OFFSET && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < OFFSET && pullDownEl.className.match('flip')) {
pullDownEl.className = 'idle';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
}
if (this.y < (maxScrollY - pullUpOffset - OFFSET) && !pullUpEl.className.match('flip')) {
if (hasMoreData) {
this.maxScrollY = this.maxScrollY - pullUpOffset;
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
}
} else if (this.y > (maxScrollY - pullUpOffset - OFFSET) && pullUpEl.className.match('flip')) {
if (hasMoreData) {
this.maxScrollY = maxScrollY;
pullUpEl.className = 'idle';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
}
},
onScrollEnd: function() {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
page=1;
getPageData(page);
}
else if (hasMoreData && pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
page++;
getPageData(page);
}
}
});
$("#thelist").empty();
fillPageData(data.rtnMap.dailyIncome.items);
}
}
});
}
function getPageData(page)
{
$.ajax({
type : "POST",
dataType : "json",
url : getPubAccountHistoryMsgListUrl,
data : {"accountCode": accountCode, "pageIndex":page, "pageSize":PAGESIZE},
success : function(data) {
if (data.result == "success") {
if (page==1) {
$("#thelist").empty();
}
if (data.rtnMap.dailyIncome.rowsCount< PAGESIZE) {
hasMoreData = false;
$("#pullUp").hide();
} else {
hasMoreData = true;
$("#pullUp").show();
}
fillPageData(data.rtnMap.dailyIncome.items);
}
}
});
}
function fillPageData(items)
{
for (var i = 0; i < items.length; i++) {
//4:图文消息
if(items[i].type==4){
$("#thelist").append(items[i].content);
}
//3:语音
else if(items[i].type==3){
$("#thelist").append('<li>' + "【语音消息】" + '</li>');
}
//2:图片消息
else if(items[i].type==2){
$("#thelist").append('<li class=\"i_xin_content\">' +"<img src='"+items[i].content+"' />" + '</li>');
}
//1:文本消息
else{
$("#thelist").append('<li>' + items[i].content + '</li>');
}
}
myScroll.refresh();
if (hasMoreData) {
myScroll.maxScrollY = myScroll.maxScrollY + pullUpOffset;
} else {
myScroll.maxScrollY = myScroll.maxScrollY;
}
maxScrollY = myScroll.maxScrollY;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- iScroll 用法说明
- iScroll框架解析
- 移动设备web开发插件iScroll的使用详解
- ☀【插件】iScroll
- iscroll
- iscroll
- iscroll使用遇到的两个问题
- iscroll动态加载数据完美解决方案
- iScroll中事件点击触发两次解决方案
- 解决iscroll的超链接问题（针对iscroll4）
- 【iScroll源码学习03】iScroll事件机制与滚动条的实现
- iScroll 下 a 标签失效
- IScroll.js 学习笔记
- 3.10 针对于iscroll 使用y获取滚动高度
- 移动设备web开发插件iScroll的使用详解
- 使用iScroll时input复选框不能选中解决方法
- IScroll.js移动端点击事件被阻止的解决方案.
- 基于iscroll.js实现下拉刷新和上拉加载特效
- 一句代码调用UUIScrollView 为底的无限循环
- iscroll参数说明