移动端下拉刷新，向后台请求数据

首先说明，下拉刷新有两种情况：

一，重新刷新整个页面.window.location.reload()，这种方式也可以做到，前提是进入页面也是直接从后台取数据，这种方法较简单；

二，下拉后不刷新页面，只是向后台发送ajax请求，这种情况就复杂点，会存在服务端返回数据重复的情况，这个时候一般需要服务端返回一个参数，供客户端判断；

下面是自己js手写下拉刷新代码：（一些博客、论坛有别人写好的，可修改使用）

css

.loading {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
            
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        }
    }
            
@keyframes rotate {
    0% {
        transform: rotate(0deg);
     }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
        }
}    
            

js

function update(element) {
                var start = 0,
                    end = 0,
                    ele = $(element)[0];//DOM对象转化为jQuery对象
                ele.addEventListener("touchstart", touchstart, false);
                ele.addEventListener("touchmove", touchmove, false);
                ele.addEventListener("touchend", touchend, false);

                $('<div class="update">↓下拉刷新</div>').prependTo($("body"));

                function touchstart(ev) {
                    var touch = ev.targetTouches[0];
                    start = touch.pageY;
                }

                function touchmove(ev) {
                    var touch = ev.targetTouches[0];
                    end = start - touch.pageY;
                    $(this).css("top", (-end + "px"))
                    if(end < 0 && $(document).scrollTop() == 0) {
                        $(".update").show();
                        end > -60 ? $(".update").html('↓下拉刷新') : $(".update").html('↑释放更新 ');
                    }
                }

                function touchend(ev) {
                    if(parseInt(end) < 0 && $(document).scrollTop() == 0) {
                        $(".update").html('<span class="loading"></span>加载中...');
                        //GetList(obj);向后台请求数据
                        window.location.reload();//刷新整个页面
                        setTimeout(function() {
                            $(".update").remove();
                            ele.css('top',0);
                        }, 2500);
                    }
                }
            }