iscroll滑动下拉 结合 jquery mobile 实例应用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title></title>
<link href="../Scripts/Jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"
type="text/css" />
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/Jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<script src="../Scripts/Jquerymobile/iscroll/iscroll.js" type="text/javascript"></script>
<style type="text/css" media="all">
body, ul, li
{
padding: 0;
margin: 0;
border: 0;
}
body
{
-webkit-user-select: none;
-webkit-text-size-adjust: none;
font-family: 微软雅黑;
background-color: #f9f9f9;
background-position: center center;
background-repeat: no-repeat;
border-radius: 1em;
}
#wrapper
{
position: absolute;
z-index: 1;
top: 0px;
bottom: 0px;
left: 0;
width: 100%;
overflow: auto;
}
#scroller
{
position: relative; /* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color: rgba(0,0,0,0);
float: left;
width: 100%;
padding: 0;
}
#scroller ul
{
position: relative;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller li
{
background-color: #fafafa;
}
#scroller li > a
{
display: block;
}
/**
*
* 下拉样式 Pull down styles
*
*/
#pullDown, #pullUp
{
background: #fff;
height: 40px;
line-height: 40px;
padding: 5px 10px;
font-weight: bold;
font-size: 12px;
color: #888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon
{
display: block;
float: left;
width: 40px;
height: 40px;
background: url(../Scripts/Jquerymobile/iscroll/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;
}
#thelist
{
min-height: 600px;
}
</style>
</head>
<body>
<div id="wrapper">
<div data-role="page" id="pageone">
<div id="scroller">
<div data-role="content">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
</div>
<ul id="thelist" data-role="listview" data-icon="false">
@*<li><a href="#">
<img src="../Content/Wallet/list/guoqi.png" width="100%" />
<h3>
test</h3>
<p>
testtesttesttesttesttesttesttesttesttest.</p>
<p class="ui-li-aside">
2014-12-25 20:37</p>
</a></li>*@
@{
string tempHtml = string.Empty;
string imgShow = string.Empty;
string tempTime = string.Empty;
if (tempGoldList != null && tempGoldList.Count > 0)
{
foreach (KeyValuePair<AdDividendCDTO, string> _model in tempGoldList)
{
tempHtml += "<li>";
if (_model.Key.Status == 1)
{
imgShow = "../Content/Wallet/list/";
}
else if (_model.Key.Status == 2)
{
imgShow = "../Content/Wallet/list/";
}
else
{
imgShow = "../Content/Wallet/list/";
}
tempHtml += "<a href=\"#\" onclick=\"Goto('RemindWallet?curChangeOrg=00000000-0000-0000-0000-000000000000&sessionId=" + ViewBag.sessionid + "&userId=" + ViewBag.UserId + "&appId=" + ViewBag.AppId + "&isAnnon=" + ViewBag.IsAnnon + "&deviceId=" + ViewBag.DeviceId + "&os=" + ViewBag.MobileType + "&appName=" + ViewBag.AppName + "&msgId=" + _model.Key.Id + "')\">";
tempHtml += "<img src=\"" + imgShow + "\" width=\"50em\" height=\"50em\" style=\"margin:0.3em;\">";
tempHtml += "<p style=\"font-size:1.0em;width:80%;\">" + _model.Value + "</p>";
tempHtml += "<p style=\" color:#a3a3a3; font-size:0.95em;\"></p>";
tempHtml += " <p class=\"ui-li-aside\" style=\" color:#a3a3a3; font-size:0.95em; top:0.7em;\">" + _model.Key.DueDateStr + "<p>";
tempHtml += "</a>";
tempHtml += "</li>";
}
}
}
@(new HtmlString(tempHtml))
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
</div>
</div>
</div>
</div>
</div>
<div>
<input type="hidden" id="HidSessionId" value="@(ViewBag.sessionid)" />
<input type="hidden" id="HidUserId" value="@(ViewBag.UserId)" />
<input type="hidden" id="HidAppId" value="@(ViewBag.AppId)" />
<input type="hidden" id="HidIsAnnon" value="@(ViewBag.IsAnnon)" />
<input type="hidden" id="HidDeviceId" value="@(ViewBag.DeviceId)" />
<input type="hidden" id="HidMobileType" value="@(ViewBag.MobileType)" />
<input type="hidden" id="HidAppName" value="@(ViewBag.AppName)" />
</div>
</body>
</html>
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
/**
* 下拉刷新 （自定义实现此方法）
* myScroll.refresh(); // 数据加载完成后，调用界面更新方法
*/
function pullDownAction() {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
//模拟浏览器数据加载延迟
UpOrDown = 0;
CurrentPage = 1;
GetData();
myScroll.refresh(); //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
};
/**
* 滚动翻页 （自定义实现此方法）
* myScroll.refresh(); // 数据加载完成后，调用界面更新方法
*/
function pullUpAction() {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
UpOrDown = 1;
GetData();
myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); //
};
/**
* 初始化iScroll控件
*/
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll('wrapper', {
scrollbarClass: 'myScrollbar', /* 重要样式 */
useTransition: false, /* 此属性不知用意，本人从true改为false */
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
pullUpAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
//初始化绑定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<script type="text/javascript">
var CurrentPage = 2;
var UpOrDown = 1; //0:下滑，1:上滑
$(function () {
});
function GetData() {
if (UpOrDown == 0) {
CurrentPage = 1;
}
var postdata = {
userId: $("#HidUserId").val(),
appId: $("#HidAppId").val(),
isAnnon: $("#HidIsAnnon").val(),
deviceId: $("#HidDeviceId").val(),
os: $("#HidMobileType").val(),
appName: $("#HidAppName").val(),
sessionid: $("#HidSessionId").val(),
pageIndex: CurrentPage,
pageSize: 15
};
$.ajax({
async: true,
type: "POST",
dataType: "json",
url: "/Wallet/AjaxGetWalletList?r=" + Math.random(),
data: postdata,
success: function (data) {
if (data) {
var dataContent = "";
var RefContent = "";
var itemThelist = $("#thelist");
for (var i = 0; i < data.length; i++) {
dataContent = createItem(data[i]);
if (UpOrDown == 1) {
itemThelist.append(dataContent)
} else {
RefContent += dataContent
}
}
if (UpOrDown == 0) {
itemThelist.html(RefContent);
}
//数据加载完成后，调用页面更新方法
myScroll.refresh();
if (data.length > 0) {
CurrentPage++;
}
}
},
error: function (err) {
myScroll.refresh();
}
});
}
var template = '<li class="ui-li-has-thumb ui-first-child"><a class="ui-btn" href="#" onclick="Goto(\'RemindWallet?curChangeOrg=00000000-0000-0000-0000-000000000000&sessionId={sessionid}&userId={userid}&appId={appid}&isAnnon={isAnnon}&deviceId={deviceId}&os={MobileType}&appName={appName}&msgId={msgId}\')">'
+ '<img src="{image}" width="50em" height="50em" style="margin:0.3em;" />'
+ '<p style="font-size:1.0em;width:80%;">{message}</p>'
+ '<p style=\" color:#a3a3a3; font-size:0.95em;\"></p>'
+ '<p class="ui-li-aside" style="color:#a3a3a3; font-size:0.95em; top:0.7em;">'
+ '{time}</p></a></li>';
function createItem(data) {
var str = template;
str = str.replace("{sessionid}", $("#HidSessionId").val());
str = str.replace("{userid}", $("#HidUserId").val());
str = str.replace("{appid}", $("#HidAppId").val());
str = str.replace("{isAnnon}", $("#HidIsAnnon").val());
str = str.replace("{deviceId}", $("#HidDeviceId").val());
str = str.replace("{MobileType}", $("#HidMobileType").val());
str = str.replace("{time}", data.Key.DueDateStr);
str = str.replace("{msgId}", data.Key.Id);
str = str.replace("{message}", data.Value);
str = str.replace("{appName}", $("#HidAppName").val());
if (data.Key.Status == 1) {
str = str.replace("{image}", "../Content/Wallet/list/");
} else if (data.Key.Status == 2) {
str = str.replace("{image}", "../Content/Wallet/list/");
}
else {
str = str.replace("{image}", "../Content/Wallet/list/");
}
return str;
}
function Goto(_href) {
window.location.href = _href;
}
</script>
jquery mobile 全局性比较强，因此在页面设计的时候尽可能的 单独添加元素的样式，修改本身样式表一定要谨慎，以免影响其他页面。
