jquery mobile关于使用iscroll动态加载数据实现下拉刷新和上拉的效果

最新推荐文章于 2020-05-13 16:51:00 发布

nvzizhou

最新推荐文章于 2020-05-13 16:51:00 发布

阅读量1.4w

点赞数 3

文章标签： jquery mobile 下拉刷新上拉加载更多动态刷新list

本文链接：https://blog.csdn.net/nvzizhou/article/details/39961533

版权

本文档详细介绍了如何在jQuery Mobile项目中结合iScroll实现下拉刷新和上拉加载更多的功能。通过示例代码展示了如何从后台获取JSON数据，并动态加载到列表视图中，同时处理下拉刷新和上拉加载的数据交互逻辑。最终实现了在用户下拉时更新数据，上拉时加载更多内容的效果。

摘要由CSDN通过智能技术生成

做下拉刷新和上拉加载的时候，在网上看了无数个一样的代码，无奈，我的是需要从后台取数据出来，网上的千篇一律的全部都是官网贴出来的代码，for循环依次加载数据，上拉刷新，下拉显示更多数据，自己做的时候，由于我是后台json解析取数，一直显示不到我想要的效果，后来搞了几天，终于

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>通知公告</title>
<link rel="stylesheet" href="jquery.mobile.min.css">
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.cookies.2.2.0.js"></script>
<script src="jquery.cookies.2.2.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="scrollbar.css">
<script src="iscroll.js"></script>
<script src="json2.js"></script>
<style type="text/css">
/**上下拉的样式代码**/

.ui-li-heading {
font-size: 16px;
font-weight: 700;
display: block;
margin: .6em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
body,ul,li {
	padding:1;
	margin:0;
	border:0;
}

body {
	font-size:12px;
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
	font-family:helvetica;
}

#header {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:0px;
	line-height:0px;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
	background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	padding:0;
	color:#eee;
	font-size:20px;
	text-align:center;
}

#header a {
	color:#f3f3f3;
	text-decoration:none;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
	position:absolute;
	bottom:0; left:0;
	width:100%;
	height:0px;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
	background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
	background-image:-o-linear-gradient(top, #999, #666 2%, #222);
	padding:0;
	border-top:1px solid #444;
}

#wrapper {
	position:absolute; z-index:1;
	top:0px; bottom:0px; left:0;
	width:100%;
	background:#f1f1f1;
	overflow:auto;
}

#scroller {
	position:relative;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);

	float:left;
	width:100%;
	padding:0;
}



/**
 *
 * 下拉样式 Pull down styles
 *
 */
#pullDown, #pullUp {
	background:#fff;
	height:40px;
	line-height:40px;
	padding:5px