原生JS、CSS3 上拉刷新效果的实现。

突然间的兴致，把遗留的上拉刷新的组件给写写，完工确实也花费了不少时间。

个人认为在移动端 大可不必做一个上拉的效果来进行数据分页，类型淘宝、等app都是判断滚动条到底部进行数据加载的动作，效果堪称极品中的上品，确实不错。前端生也为此寻找一些乐趣。Dome不是一流，但是一般。有任何兼容性问题，欢迎提出和分享。 在这里与大家分享 以及 技术学习的目的。

解决发现问题:
兼容IOS滚动条 上拉是滚动不流程的问题。
兼容Android 滚动与IOS适配问题。
上拉多次触发的问题。

浏览器访问切换到手机 Mobile 调试模式。

1、引入必要的css样式文件 以及 js 脚本。

<link href="pull-refresh.css" rel="stylesheet" />
<script src="pull-refresh.js" type="text/javascript"></script>

2、构建编写上拉组件DOM

<!--上拉容器,指定其高度！-->
<div class="pull-wrapper" style="border: 0px #00f solid;height: 100%;">
	<!--上拉模块-->
	<div id="pull-components">
	
		<!--内容-->
	
	<!--上拉提示，提示的具体样式效果 可自行修改-->
	<div id="pullMessage">上拉显示20条数据</div>
	</div>
</div>

3、初始化上拉组件：

//调用pull-refresh.js 中upper_pull方法。J因为S实现流程较为繁琐，具体实现大家请下载附件DOME。如果没有积分下载，可加联系群，下载。
upper_pull({
	//绑定上拉组件ID
	container:'pull-components',
	operation:function(e) {
	var that = this;
	
	//数据请求
	
	//数据请求完成，结束上拉刷新的动作操作
	that.back();
		
	} 
});

附件下载地址：http://download.csdn.net/download/china_guanq/10167994

H5/前端技术交流平台:595377655