下拉刷新插件

1. 这是一款依赖于jquery的下拉刷新插件，jquery请自行下载。下面是插件js代码

$.fn.extend({
    refresh: function(option) {
        var el = $(this);
        var defaults = {
        	height:60,//设置触发下拉刷新的距离；
        	loading_text:$('.loading_text'),//设置文字容器；
        	loading_icon:$('.loading_icon'),//设置加载icon的容器；
        	coefficient:0.6,//阻尼系数；注，阻尼系数越小，越难触发。
        	pullFunction:function(){},//下拉刷新请求数据函数；
        }
        var settings = $.extend(defaults, option || {}); //init
        console.log(settings)
            var _hasPhone = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i);            
            var height=settings.height;
            var className="loading_icon";          
            var _hasTouch = 'ontouchstart' in window;
            var _pulldownConfig = { normalStatus: "下拉即可刷新", maxStatus: "松开立即刷新", releaseStatus: "正在加载…" };
            var _start = 0,_end = 0;          
            var _TransitionObj = {
                translate: function (height) {
                    el.css({ "-webkit-transform": "translate(0," + height + "px)", "transform": "translate(0," + height + "px)" });
                },
                translitionTime: function (time) {
                    el.css({ "-webkit-transition": "all " + time + "s", "transition": "all " + time + "s" });
                },
                goDefault: function () {
                    _TransitionObj.translitionTime(0.5);
                    _TransitionObj.translate(0);
                }
            };    
            var flag=true
            var _bindTouchEvents = function () {
            if(_hasPhone){
            	el.bind("touchstart", _touchstartHandler);
                el.bind("touchmove", _touchmoveHandler);
                el.bind("touchend", _touchendHandler);
            }else{
            	el.bind("mousedown", _touchstartHandler);
                el.bind("mousemove", _touchmoveHandler);
                el.bind("mouseup", _touchendHandler);
            }
              
            };
            var _touchstartHandler = function (e) {  
            	flag=false;
                settings.loading_icon.removeClass(className);
                var even = typeof event == "undefined" ? e : event;
                //保存当前鼠标Y坐标
                _start = _hasTouch ? even.touches[0].pageY : even.pageY;
                if (el.scrollTop() > 0) {
                    console.log(el.scrollTop());
                    //消除滑块动画时间
                    _TransitionObj.translitionTime(0);
                }
            };
            var changeHeight;
            var _touchmoveHandler = function (e) {  
             	if($(document).scrollTop()>=10||flag){
             		return
             	}
             	changeHeight=_end - _start;
                var even = typeof event == "undefined" ? e : event;
                //保存当前鼠标Y坐标
                _end = _hasTouch ? even.touches[0].pageY : even.pageY;
                if (changeHeight<0||changeHeight>200){
                	return
                }
                if (changeHeight*settings.coefficient > height) {
                    settings.loading_text.html(_pulldownConfig.maxStatus);
                } else {
                    settings.loading_text.html(_pulldownConfig.normalStatus);
                }
                even.preventDefault();
                //消除滑块动画时间
                _TransitionObj.translitionTime(0); 
                _TransitionObj.translate(changeHeight*settings.coefficient);
            };
            var back=function(){
            	_TransitionObj.translate(0)
            }
            var _touchendHandler = function (e) {
            	flag=true;
            	if($(document).scrollTop()>0){
             		return
             	}
                //判断滑动距离是否大于等于指定值
                if (changeHeight*settings.coefficient>= height) {
                    settings.loading_icon.addClass(className);
                    //设置滑块回弹时间
                    _TransitionObj.translitionTime(1);
                    
                    //设置刷新时的文字
                    settings.loading_text.html(_pulldownConfig.releaseStatus);
                    //保留提示部分
                  	_TransitionObj.translate(40);
                    //执行回调函数
                   settings.pullFunction(3000,function(){ _TransitionObj.translate(0)})
                    
                 
                } else {
                    //返回初始状态
                    _TransitionObj.goDefault();
                }
            }
            _bindTouchEvents();
       }
  })

2.下面是一个简单的demo示例， html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
		
		<title>jquery-puull-refresh</title>
		<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/pullRefresh.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			 body {
            font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
            color: #4C4747;
        }

        body, div, p,ul {
            padding: 0px;
            margin: 0px;
        }

        .pull_drawing {
            position: absolute;
            top: -58px;
            width: 100%;
            padding-top: 22px;        
            background-size: 172px 22px;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }

        .loading_icon {
            position: absolute;
            margin-left: -25px;
            margin-top: 8px;
            width: 14px;
            height: 14px;
            border: 2px solid #54a5d4;
            border-radius: 50%;
            -webkit-animation: roll 1s linear infinite;
            animation: roll 1s linear infinite;
            clip: rect(0,15px,18px,0);
            line-height: 35px;
            text-align: center;
        }

        @-webkit-keyframes roll {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes roll {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
        .main {
            width: 100%;
            /*border: solid 1px #0094ff;*/
        }
        .textbg {
            width: 100%;
            line-height: 30px;
            background-color: #F2F2F2;
            font-size: 17px;
            font-family: 'Adobe Garamond Pro';
        }
        .textbg p{
            text-indent: 30px;
        }
        .nav{
        	background-color: #fff;
        	position: relative;
            z-index: 10;
            padding: 6px 10px;
            text-align: center;
        }
        #data-list li{
        	padding: 4px 10px;
        	border-bottom: 1px solid #ddd;
        }
		</style>
	</head>
	<body style="background-color: #f5f5f5">
	    <div class="nav">
	    	我是导航栏
	    </div>
    <div id="main" class="main">
        <p class="pull_drawing">
            <i class="loading_icon"></i>
            <span class="loading_text">下拉刷新中</span>
        </p>
        <div class="textbg">
          <ul id="data-list">
          	<li>列表item</li>
            <li>列表item</li>
            <li>列表item</li>
            <li>列表item</li>
            <li>列表item</li>
            <li>列表item</li>
            <li>列表item</li>
            <li>列表item</li>
          </ul>       
        </div>
    </div>
    <script type="text/javascript">
    	$('#main').refresh({
    		pullFunction:function(ms,callback){
    			setTimeout(function(){
    				for(var i=0;i<5;i++){
    					$('#data-list').append('<li>我是新增的item</li>')
    				}
 				callback();
    				
    			},ms)
    		},
    	})
    </script>
</body>
</html>

3，希望对大家有所帮助，如有疑问 欢迎评论！