iscrollview下载地址:https://github.com/watusi/jquery-mobile-iscrollview
iscroll 下载地址:http://cubiq.org/iscroll-4
计算
安全
数据库
网络和加速
企业服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Demo</title>
<link rel="stylesheet" href="css/jquery.mobile.custom.structure.css"/>
<link rel="stylesheet" href="css/jquery.mobile.custom.theme.css"/>
<link rel="stylesheet" href="css/jquery.mobile.iscrollview-pull.css"/>
<link rel="stylesheet" href="css/jquery.mobile.iscrollview.css"/>
<script src="jslib/jquery-1.9.0.js"></script>
<script src="jslib/iscroll.js"></script>
<script src="jslib/jquery.mobile.custom.js"></script>
<script src="jslib/jquery.mobile.iscrollview.js"></script>
</head>
<body>
<div data-role="page" id="iscrollPage" class="index-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header">
<h2>INDEX PAGE</h2>
</div>
<div data-role="content" class="example-wrapper" data-iscroll>
<div class="iscroll-pulldown" >
<span class="iscroll-pull-icon"></span>
<span class="iscroll-pull-label" data-iscroll-pulled-text="刷新" data-iscroll-loading-text="刷新中"></span>
</div>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div class="iscroll-pullup">
<span class="iscroll-pull-icon"></span>
<span class="iscroll-pull-label" data-iscroll-pulled-text="加载" data-iscroll-loading-text="加载中"></span>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer">
<h2>My Footer</h2>
</div>
</div>
<script type="text/javascript">
$(document).on("pageinit","#iscrollPage",function(){
$(".iscroll-wrapper", this).bind( {
"iscroll_onpulldown":function(){
console.log("pull down ...");
$("#iscrollPage [data-role=listview]").empty();
setTimeout("refreshList()",500);
},
"iscroll_onpullup":function(){
console.log("pull up ... ");
setTimeout("refreshList()",500);
},
iscroll_onpulldownloading:function(){
console.log("iscroll_onpulldownloading ... ");
},
iscroll_onpulldownpulled:function(){
console.log("iscroll_onpulldownpulled ... ");
},
iscroll_onpulldownreset:function(){
console.log("iscroll_onpulldownreset ... ");
}
});
});
function refreshList(){
$("#iscrollPage [data-role=listview]").append("<li>Item 1</li>");
$("#iscrollPage [data-role=listview]").listview("refresh");
}
</script>
</body>
</html>亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
