移动web 上下拉刷新，支持iscroll滚动内容和普通内容(没有滚动的)。。。

效果图：

 

主要代码：

UpDownRefresh.css

.UpDownRefresh_loading {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 5px solid white;
	border-left: 5px solid cyan;
	border-right: 5px solid cyan;
	
	-webkit-animation: UpDownRefresh_load 1s linear infinite;
}

@-webkit-keyframes UpDownRefresh_load {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

UpDownRefresh.js

function UpDownRefresh(identifier) {
	this.iscroll;//iscroll对象
	this.wrapper;//iscroll最外层的div wrapper
//	this.identifier;//唯一标尺
	this.content;//不是滚动视图的对象

	var header_refresh_icon, footer_refresh_icon;
	var _this = this;
	var isRefresh = false,
		isBeingRefresh = false,
		isFooterRefresh = false,
		isFooterBeingRefresh = false;
	var bodyWidth = document.body.offsetWidth ? document.body.offsetWidth : document.documentElement.clientWidth;
	var headerRefreshingCallBack, footerRefreshingCallBack;//刷新回调
	var yDistance = 30; //触发刷新的距离
	var contentTop;
	
	function commonrefresh_icon_style(refresh_icon) {
		refresh_icon.style.backgroundColor = "white";
		refresh_icon.style.textAlign = "center";
		refresh_icon.style.width = "40px";
		refresh_icon.style.height = "40px";
		refresh_icon.style.lineHeight = "36px";
		refresh_icon.style.borderRadius = "50%";
		refresh_icon.style.color = "black";
		refresh_icon.style.fontSize = "8px";
		refresh_icon.style.position = "absolute";
		refresh_icon.style.padding = "2px";
		refresh_icon.style.display = "none";
		refresh_icon.style.boxShadow = " 0 0 30px black";
	}
	
	this.addHeaderRefreshing = function(CallBack) {
		if(_this.iscroll) {
			addScrollerHeaderRefreshing(CallBack);
		} else if(_this.content){
			addContentHeaderRefreshing(CallBack);
		}
	}

	function addScrollerHeaderRefreshing(CallBack) {
		_this.headerRefreshingCallBack = CallBack;
		
		header_refresh_icon = document.getElementById("header_refresh_icon_"+identifier)
		if(header_refresh_icon != null) {
			wrapper.removeChild(header_refresh_icon);
			header_refresh_icon = null;
		}
		
		header_refresh_icon = document.createElement("div");
		header_refresh_icon.setAttribute("id","header_refresh_icon_"+identifier);
		header_refresh_icon.style.top = 0;
		
		commonrefresh_icon_style(header_refresh_icon);
		wrapper.appendChild(header_refresh_icon);
		
		_this.iscroll.on("scrollEnd", function() {
			if(!isBeingRefresh) {
				if(isRefresh) {
					_this.headerBeginRefreshing();
				} else {
					_this.headerEndRefreshing();
				}
			}
		});

		_this.iscroll.on("scroll", function() {
			var y = this.y;
			if(!isBeingRefresh) {
				if(y < 0) {
					header_refresh_icon.style.top = y + "px";
				} else {
					header_refresh_icon.innerText = "下拉刷新";
					header_refresh_icon.style.display = "inline-block";
					isRefresh = false;
					if(y > yDistance) {
						y = yDistance;
						header_refresh_icon.innerText = "释放刷新";
						isRefresh = true;
					}
					header_refresh_icon.style.top = y + "px";
				}
				header_refresh_icon.style.left = (bodyWidth - header_refresh_icon.getBoundingClientRect().width) / 2 + "px";
			}
		});
	}

	function addContentHeaderRefreshing(CallBack) {

		_this.headerRefreshingCallBack = CallBack;

		_this.content.addEventListener('touchstart', touch, false);
		_this.content.addEventListener('touchmove', touch, false);
		_this.content.addEventListener('touchend', touch, false);
		
		var clientRect = _this.content.getBoundingClientRect();
	   contentTop = clientRect.top + document.body.scrollTop;

		var startY, moveY;
		header_refresh_icon = document.getElementById("header_refresh_icon_"+identifier)
		if(header_refresh_icon != null) {
			_this.content.removeChild(header_refresh_icon);
			header_refresh_icon = null;
		}
		header_refresh_icon = document.createElement("div");
		header_refresh_icon.setAttribute("id","header_refresh_icon_"+identifier);
		
		header_refresh_icon.style.top = contentTop +"px";
		commonrefresh_icon_style(header_refresh_icon);
		_this.content.appendChild(header_refresh_icon);

		function touch(event) {
			switch(event.type) {
				case "touchstart":
					startY = event.touches[0].pageY;
					break;

				case "touchend":
					if(!isBeingRefresh) {
						if(isRefresh) {
							_this.headerBeginRefreshing();
						} else {
							_this.headerEndRefreshing();
						}
					}
					break;

				case "touchmove":
					event.preventDefault();
					moveY = event.touches[0].pageY;
					var y = moveY - startY;
					if(!isBeingRefresh) {
						if(y < 0) {
							var top = contentTop+y;
							if(top < contentTop) {
								top = contentTop;
							}
							header_refresh_icon.style.top =  top+ "px";
						} else {
							header_refresh_icon.innerText = "下拉刷新";
							header_refresh_icon.style.display = "inline-block";
							isRefresh = false;
							if(y > yDistance) {
								y = yDistance;
								header_refresh_icon.innerText = "释放刷新";
								isRefresh = true;
							}
							header_refresh_icon.style.top = (contentTop+y) + "px";
						}
						header_refresh_icon.style.left = (bodyWidth - header_refresh_icon.getBoundingClientRect().width) / 2 + "px";
					}
					break;
			}
		}
	}

	this.headerBeginRefreshing = function() {
		isRefresh = true;
		isBeingRefresh = true;
		header_refresh_icon.style.display = "inline-block";
		if(contentTop) {
			header_refresh_icon.style.top = (yDistance+contentTop) + "px";
		}else {
			header_refresh_icon.style.top = yDistance + "px";
		}
		header_refresh_icon.innerHTML = '<div class="UpDownRefresh_loading"></div>';
		header_refresh_icon.style.left = (bodyWidth - header_refresh_icon.getBoundingClientRect().width) / 2 + "px";
		_this.headerRefreshingCallBack();
	}

	this.headerEndRefreshing = function() {
		isRefresh = false;
		isBeingRefresh = false;
		header_refresh_icon.style.display = "none";
		if(contentTop) {
			header_refresh_icon.style.top = contentTop+"px";
		}else {
			header_refresh_icon.style.top = 0;
		}
	}

	this.addFooterRefreshing = function(CallBack) {
		_this.footerRefreshingCallBack = CallBack;
		scroller = document.querySelector(_this.scrollerEl);
		footer_refresh_icon = document.createElement("div");
		footer_refresh_icon.style.bottom = 0;
		commonrefresh_icon_style(footer_refresh_icon);

		wrapper.appendChild(footer_refresh_icon);

		var maxScrollY = _this.iscroll.maxScrollY;
		_this.iscroll.on("scrollEnd", function() {
			if(!isFooterBeingRefresh) {
				if(isFooterRefresh) {
					_this.footerBeginRefreshing();
				} else {
					_this.footerEndRefreshing();
				}
			}
		});

		_this.iscroll.on("scroll", function() {
			var y = this.y;
			if(!isFooterBeingRefresh) {
				if(y > maxScrollY) {
					footer_refresh_icon.style.bottom = (maxScrollY - y) + "px";
				} else {
					footer_refresh_icon.innerText = "上拉加载";
					footer_refresh_icon.style.display = "inline-block";
					isFooterRefresh = false;

					if(y < maxScrollY) {
						y = maxScrollY - y;
						if(y > yDistance) {
							y = yDistance;
							footer_refresh_icon.innerText = "释放加载";
							isFooterRefresh = true;
						}
					}
					footer_refresh_icon.style.bottom = y + "px";
				}
				footer_refresh_icon.style.left = (bodyWidth - footer_refresh_icon.getBoundingClientRect().width) / 2 + "px";
			}
		});
	}
	
	this.footerBeginRefreshing = function() {
		isFooterRefresh = true;
		isFooterBeingRefresh = true;
		footer_refresh_icon.style.display = "inline-block";
		footer_refresh_icon.style.bottom = yDistance + "px";
		footer_refresh_icon.innerHTML = '<div class="UpDownRefresh_loading"></div>';
		footer_refresh_icon.style.left = (bodyWidth - footer_refresh_icon.getBoundingClientRect().width) / 2 + "px";
		_this.footerRefreshingCallBack();
	}

	this.footerEndRefreshing = function() {
		isFooterRefresh = false;
		isFooterBeingRefresh = false;
		footer_refresh_icon.style.display = "none";
		footer_refresh_icon.style.bottom = 0;
	}

}

使用：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<script src="js/iscroll/iscroll-probe.js"></script>

		<script src="js/UpDownRefresh/UpDownRefresh.js"></script>
		<link href="js/UpDownRefresh/UpDownRefresh.css" rel="stylesheet" />

		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			body {
				width: 100%;
				height: 100vh;
				overflow-y: scroll;
				-webkit-overflow-scrolling: touch;
			}
			
			#wrapper {
				height: 50vh;
				width: 100%;
				text-align: center;
				overflow: hidden;
				position: relative;
				background-color: royalblue;
			}
			
			ul {
				min-height: 51vh;
			}
			
			#one {
				background-color: brown;
				width: 100%;
				height: 30vh;
			}
		</style>
	</head>

	<body>
		普通内容,没有滚动
		<div id="one">

		</div>
		滚动内容 iscroll
		<div id="wrapper">
			<div id="scroller">
				<ul id="ul">
					<li>a</li>
					<li>a</li>
					<li>a</li>
					<li>a</li>
					<li>a</li>
					<li>a</li>
					<li>a</li>
					<li>a</li>
					<li>a</li>
				</ul>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		mui.ready(function() {
			var myScroll = new IScroll('#wrapper', {
				scrollbars: false,
				mouseWheel: true,
				interactiveScrollbars: true,
				shrinkScrollbars: 'scale',
				fadeScrollbars: true,
				probeType: 2,
			});

			var upDownRefresh = new UpDownRefresh("one");
			upDownRefresh.iscroll = myScroll;
			upDownRefresh.wrapper = document.getElementById("wrapper");
			upDownRefresh.addHeaderRefreshing(function() {
				setTimeout(function() {
					myScroll.refresh();
					upDownRefresh.headerEndRefreshing();
				}, 3000);
			});
			
			upDownRefresh.addFooterRefreshing(function() {
				setTimeout(function() {
					myScroll.refresh();
					upDownRefresh.footerEndRefreshing();
				}, 3000);
			});

			upDownRefresh.headerBeginRefreshing();

			var upDownRefresh2 = new UpDownRefresh("two");
			upDownRefresh2.content = document.getElementById("one");
			upDownRefresh2.addHeaderRefreshing(function() {
				setTimeout(function() {
					upDownRefresh2.headerEndRefreshing();
				}, 3000);
			});
			
			upDownRefresh2.headerBeginRefreshing();
		})

	</script>
</html>