首页 > 代码库 > iscroll滑动下拉 结合 jquery mobile 实例应用
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=http://www.mamicode.com/"../Scripts/Jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" /> <script src=http://www.mamicode.com/"../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script src=http://www.mamicode.com/"../Scripts/Jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js" type="text/javascript"></script> <script src=http://www.mamicode.com/"../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=http://www.mamicode.com/"#"> <img src=http://www.mamicode.com/"../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=http://www.mamicode.com/"#\" 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=http://www.mamicode.com/"" + 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=http://www.mamicode.com/"@(ViewBag.sessionid)" /> <input type="hidden" id="HidUserId" value=http://www.mamicode.com/"@(ViewBag.UserId)" /> <input type="hidden" id="HidAppId" value=http://www.mamicode.com/"@(ViewBag.AppId)" /> <input type="hidden" id="HidIsAnnon" value=http://www.mamicode.com/"@(ViewBag.IsAnnon)" /> <input type="hidden" id="HidDeviceId" value=http://www.mamicode.com/"@(ViewBag.DeviceId)" /> <input type="hidden" id="HidMobileType" value=http://www.mamicode.com/"@(ViewBag.MobileType)" /> <input type="hidden" id="HidAppName" value=http://www.mamicode.com/"@(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 =http://www.mamicode.com/ { 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="http://www.mamicode.com/#" 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="http://www.mamicode.com/{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 全局性比较强，因此在页面设计的时候尽可能的 单独添加元素的样式，修改本身样式表一定要谨慎，以免影响其他页面。
iscroll滑动下拉 结合 jquery mobile 实例应用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。