jQuery触屏手机上下滑动刷新代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery触屏手机上下滑动刷新代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html> 
<html>
<head> 
	<title>jQuery�����ֻ����»���ˢ�´���</title> 
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"/>
	<meta charset="GBK"/>
	<link rel="stylesheet" href="css/jquery.mobile.min.css" />
	<link rel="stylesheet" href="css/theme/theme.min.css" />
	<link rel="stylesheet" href="css/styles.css" />
	<!-- <link rel="stylesheet" href="css/styles-custom.css" /> -->
	<script src="js/jquery.min.js"></script>
	<script src="js/mobileinit.js"></script>
	<script src="js/jquery.mobile.min.js"></script>
	<script src="js/fastclick.js"></script> 
</head> 
<body>
	<!-- page -->
	<div data-role="page" id="fpmxListPage" data-iscroll="enable">
		<link rel="stylesheet" href="css/pull.css" />
		<script type="text/javascript" charset="utf-8" src="js/iscroll.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/initScroll.js"></script>
		<script type="text/javascript">
		$(document).bind("pageinit", function() {
			isInit=0;
			serverURL = "11"; //��������ַ
			startNum = 1;//��ǰҳ
			count = 5; //��ҳ��
		});
		
</script>	
<div data-role="header" data-id="myHeader" data-position="fixed"  data-tap-toggle="false">
	<h2>����ˢ��demo</h2>
	<a data-icon="back" data-rel="back" data-iconpos="notext" data-direction="reverse"></a>
	<a href="index.html" data-icon="home" data-iconpos="notext" class="ui-btn-right">
	</a>
</div>
<!-- content-->
<div data-role="content" >
	<div id="wrapperIndex" class="wrapper" >
		<div id="scrollerIndex" class="scroller">
			<div id="pullDown" >
				<span class="pullDownIcon"></span><span class="pullDownLabel">����ˢ��...</span>
			</div>
			<div style="margin: 10px 0px; padding:5px;">
				<b>2013/5/17<span style="margin:0 10px;">~</span>2013/5/17</b>
				<div class="navbar" style="height: 1px; margin-top: 5px"></div>
			</div>
			<ul data-role="listview" data-theme="a" class="list-fpmx" id="fpmxList">
				<li>
					<a href="fpmx.html">
						<img src="images/ic_normal.png" alt="">
						<p>��Դ������Ա���ʦ�����Ա���</p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_back.png" alt="">
						<h3>��5043.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal desc-back"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_wast.png" alt="">
						<h3>��0.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal desc-wast"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_normal.png" alt="">
						<h3>��5043.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_back.png" alt="">
						<h3>��5043.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal desc-back"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_wast.png" alt="">
						<h3>��0.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal desc-wast"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_normal.png" alt="">
						<h3>��5043.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_back.png" alt="">
						<h3>��5043.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal desc-back"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_wast.png" alt="">
						<h3>��0.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal desc-wast"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_normal.png" alt="">
						<h3>��5043.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_back.png" alt="">
						<h3>��5043.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal desc-back"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
				<li>
					<a href="fpmx.html">
						<img src="images/ic_wast.png" alt="">
						<h3>��0.00</h3>
						<p>��Ʊ���룺<span class="text-no">11155653322</span></p>
						<p>��Ʊ���룺<span class="text-no">00001234</span></p>
					</a>
					<p class="desc-normal desc-wast"><span class="left-aside">��Ʊ���ڣ�2013/5/17</span><span class="right-aside">��ƱԱ��01</span></p>
				</li>
			</ul>

			<div id="pullUp">
				<span class="pullUpIcon"></span><span class="pullUpLabel">�������ظ���...</span>
			</div>

		</div>
	</div>
</div>
</div>
</body>
</html>

JS代码(initScroll.js):

$(document).bind("pageshow",function(){
	function fixed(elm){
	if (elm.data("iscroll-plugin")){
	return;
}
elm.css({
	overflow:'hidden'}
);
	var barHeight = 0;
	// 页头页尾高度 var loader,pullUpEl,pullUpOffset;
	var isRefreshing = false;
	// 一次滑动事务 // 设置页头样式 var $header = elm.find('[data-role="header"]');
	if ($header.length){
	$header.css({
	"z-index":1000,padding:0,width:"100%"}
);
	barHeight += $header.height();
}
// 设置页尾样式 var $footer = elm.find('[data-role="footer"]');
	if ($footer.length){
	$footer.css({
	"z-index":1500,padding:0,width:"100%"}
);
	barHeight += $footer.height();
}
// 设置内容区域样式、高度 var $wrapper = elm.find('[data-role="content"]');
	if ($wrapper.length){
	$wrapper.css({
	"z-index":1}
);
	$wrapper.height($(window).height() - barHeight);
	$wrapper.bind('touchmove',function (e){
	e.preventDefault();
}
);
}
// 设置滚动区域 var scroller = elm.find('[data-iscroll="scroller"]').get(0);
	if (!scroller){
	$($wrapper.get(0)).children().wrapAll("<div data-iscroll='scroller'></div>");
}
var isInit = 0;
	var myScroll,pullDownEl,pullDownOffset,pullUpEl,pullUpOffset,generatedCount = 0;
	/*** 初始化iScroll控件*/
pullDownEl = document.getElementById('pullDown');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById('pullUp');
	pullUpOffset = pullUpEl.offsetHeight;
	myScroll = new iScroll($wrapper.get(0),{
	//scrollbarClass:'myScrollbar',/* 自定义样式 */
useTransition:true,//是否使用CSS变换topOffset:pullDownOffset + 25,hScroll:true,vScroll:true,hScrollbar:false,vScrollbar:true,fixedScrollbar:true,fadeScrollbar:true,hideScrollbar:true,bounce:true,momentum:true,lockDirection:true,checkDOMChanges:true,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 > 15 && !pullDownEl.className.match('flip')){
	pullDownEl.className = 'flip';
	pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
	this.minScrollY = 0;
}
else if (this.y < 15 && pullDownEl.className.match('flip')){
	pullDownEl.className = '';
	pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
	this.minScrollY = -pullDownOffset;
}
else if (this.y < (this.maxScrollY - 15)&& !pullUpEl.className.match('flip')){
	pullUpEl.className = 'flip';
	pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
	this.maxScrollY = this.maxScrollY;
}
else if (this.y > (this.maxScrollY + 15)&& 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?)}
}
,}
);
	//页面初始化isInit=1;
	/*** 下拉刷新* myScroll.refresh();
	// 数据加载完成后，调用界面更新方法*/
function pullDownAction (){
	setTimeout(update,1000);
	// <-- Simulate network congestion,remove setTimeout from production!}
/*** 上拉刷新* myScroll.refresh();
	// 数据加载完成后，调用界面更新方法*/
function pullUpAction(){
	setTimeout(loadData,1000);
	// <-- Simulate network congestion,remove setTimeout from production!}
var startNum = -1;
	var count = -1;
	function loadData(){
	console.log("当前页：" + startNum+ " || 总页数：" + count)if (startNum!=-1&&Number(startNum) >=Number(count)){
	myAlert('已加载完全部信息');
	myScroll.refresh();
	return false;
}
startNum = startNum + 1;
	showLoading();
	console.log("服务器地址："+ serverURL);
	$.ajax({
	async:false,url:serverURL,// 跨域URLtype:'get',data:startNum,timeout:6000,success:function(datas){
	//客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数desplay(datas);
}
,complete:function(XMLHttpRequest,textStatus){
	//alert(textStatus);
}
,error:function(xhr){
	//jsonp 方式此方法不被触发//请求出错处理myAlert("请求出错(请检查相关度网络状况.)");
	myScroll.refresh();
}
}
);
}
function desplay(datas){
	// datas = '<li> <a href="fpmx.html"> <img src="images/ic_wast.png" alt=""> <h3>￥0.00</h3> <p>发票代码：<span class="text-no">11155653322</span></p> <p>发票号码：<span class="text-no">00001234</span></p> </a> <p class="desc-normal desc-wast"><span class="left-aside">开票日期：2013/5/17</span><span class="right-aside">开票员：01</span></p> </li>'if(datas!=null && datas!=""){
	console.log("加载后的当前页：" + startNum + "|| 获取数据"+ datas);
	$("#fpmxList").append(datas);
	$("#fpmxList").listview("refresh");
	setTimeout(function(){
	// <-- Simulate network congestion,remove setTimeout from production!myScroll.refresh();
	// 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie:on ajax completion)hideLoading();
	if (Number(startNum) >= Number(count)){
	myAlert('已加载完全部信息');
}
}
,1500);
}
}
function update(){
	myScroll.refresh();
	// 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie:on ajax completion)window.location.reload();
}
function showMyAlert(text){
	$.mobile.loadingMessageTextVisible = true;
	$.mobile.showPageLoadingMsg("a",text,true);
}
function myAlert(text){
	showMyAlert(text);
	setTimeout(hideLoading,2000);
}
function showLoading(){
	$.mobile.loadingMessageTextVisible = true;
	$.mobile.showPageLoadingMsg("a","加载中...");
}
function hideLoading(){
	$.mobile.hidePageLoadingMsg();
}
elm.data("iscroll-plugin",myScroll);
	window.setTimeout(function(){
	myScroll.refresh();
}
,200);
}
$('[data-role="page"][data-iscroll="enable"]').bind("pageshow",function(){
	fixed($(this));
}
);
	if ($.mobile.activePage.data("iscroll") == "enable"){
	fixed($.mobile.activePage);
}
}
);

JS代码(mobileinit.js):

$(document).bind("mobileinit",function(){
	// $.mobile.ajaxEnabled = false;
	// $.mobile.linkBindingEnabled = false;
	$.mobile.defaultPageTransition = "none";
	$.mobile.activeBtnClass="ui-btn-hover-a";
	$.mobile.page.prototype.options.domCache = false;
	//��ֹhover�ӳ�$.mobile.buttonMarkup.hoverDelay = "false";
	$.mobile.loader.prototype.options.text = "���ڼ���...";
	$.mobile.loader.prototype.options.textVisible = true;
	$.mobile.loader.prototype.options.theme = "a";
	$.mobile.loader.prototype.options.html = "";
	//Thanks:https://github.com/jquery/jquery-mobile/issues/3414 $.mobile.loader.prototype.defaultHtml = "<div class='ui-loader' data-overlay-theme='a' class='ui-content' style='opacity:0.5;
	'>" + "<span class='ui-icon ui-icon-loading'></span>" + "<h1></h1>" + "<div class='ui-loader-curtain'></div>" + "</div>";
}
);

CSS代码(pull.css):

/** * * ������ʽ Pull down styles * */
#pullDown,#pullUp{background:transparent;height:45px;line-height:40px;padding:0px 10px;border-bottom:1px solid #ccc;font-weight:bold;font-size:14px;color:#888;margin-top:-15px;}
#pullUp{height:65px;padding:10px 10px 0px 0px;}
#pullDown .pullDownIcon,#pullUp .pullUpIcon{display:block;float:left;width:40px;height:40px;background:url(./images/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;}
@-webkit-keyframes loading{from{-webkit-transform:rotate(0deg) translateZ(0);}
to{-webkit-transform:rotate(360deg) translateZ(0);}
}

附件:下载该文件资源,减少时间成本(增值服务)