iscroll上拉下滑加载数据.doc

第一步：页面展示第一页数据向下滑动刷新.$cate.goodstitle 向上滑动加载更多.第二部：script type=text/javascript src=/js/iscroll.js第三部：/* 滑动 */#wrapper position:absolute; z-index:1;top:45px; bottom:48px; left:auto;width:100%;overflow:auto;#myFrame position:absolute;top:0; left:0;/* * * 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(pull-icon2x.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;-webkit-keyframes loading from -webkit-transform:rotate(0deg) translateZ(0); to -webkit-transform:rotate(360deg) translateZ(0); 第四部：var myScroll,pullDownEl, pullDownOffset,pullUpEl, pullUpOffset,generatedCount = 0;/计算pageSizevar pageSize = 0;/初始化$(document).ready(function() $(.rating-kv).rating();pageSize = $(#pageSize).val();loaded(); document.addEventListener(touchmove, function (e) e.preventDefault(); , false); document.addEventListener(DOMContentLoaded, function () setTimeout(loaded, 200); , false););/加载function loaded() pullDownEl = document.getElementById(pullDown);pullDownOffset = pullDownEl.offsetHeight;pullUpEl = document.getElementById(pullUp);pullUpOffset = pullUpEl.offsetHeight;myScroll = new iScroll(wrapper, useTransition: true,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 = Release to refresh.;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 = ;pullUpEl.querySelector(.pullUpLabel).innerHTML = 向上滑动加载更多.;this.maxScrollY = pullUpOffset;,onScrollEnd: function () if (pullDownEl.className.match(flip) pullDownEl.className = loading;pullDownEl.querySelector(.pullDownLabel).innerHTML = Loading.;pullDownAction();/ Execute custom function (ajax call?) else if (pullUpEl.className.match(flip) pullUpEl.className = loading;pullUpEl.querySelector(.pullUpLabel).innerHTML = Loading.;pullUpAction();/ Execute custom function (ajax call?);setTimeout(function () document.getElementById(wrapper).style.left = 0; , 800);/向下滑动function pullDownAction () setTimeout(function () / - Simulate network congestion, remove setTimeout from production!$.ajax(type:post,url: ,data:downObj,success:function(iRet)var ct= (new Function(, return + iRet)();if(null != iRet & != iRet & null != ct)/先清空ul$(#foodUl).html();/append拼接下一页数据);myScroll.refresh();/ Remember to refresh when contents are loaded (ie: on ajax completion), 1000);/ - Simulate network congestion, remove setTimeout from production!/向上滑动function pullUpAction () setTimeout(function () / - Simulate network congestion, remove setTimeout from production!/计算起始条数var tonum = parseInt($(#tonum).val() + parseInt(pageSize);$(#fromnum).val(parseInt($(#tonum).val() + parseInt(1);$(#tonum).val(tonum);$.ajax(type:post,url: ,data:upObj,success:function(iRet)var ct= (new Function(, return + iRet)();if(null != ct)/append拼接下一页数据elsevar tnum = parseInt($(#fromnum).val() - parseInt(pageSize);$(#tonum).val(parseInt($(#fromnum).val()- pa