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

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

一，重新刷新整个页面.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

 1 function update(element) {
 2                 var start = 0,
 3                     end = 0,
 4                     ele = $(element)[0];//DOM对象转化为jQuery对象
 5                 ele.addEventListener("touchstart", touchstart, false);
 6                 ele.addEventListener("touchmove", touchmove, false);
 7                 ele.addEventListener("touchend", touchend, false);
 8 
 9                 $('<div class="update">↓下拉刷新</div>').prependTo($("body"));
10 
11                 function touchstart(ev) {
12                     var touch = ev.targetTouches[0];
13                     start = touch.pageY;
14                 }
15 
16                 function touchmove(ev) {
17                     var touch = ev.targetTouches[0];
18                     end = start - touch.pageY;
19                     $(this).css("top", (-end + "px"))
20                     if(end < 0 && $(document).scrollTop() == 0) {
21                         $(".update").show();
22                         end > -60 ? $(".update").html('↓下拉刷新') : $(".update").html('↑释放更新 ');
23                     }
24                 }
25 
26                 function touchend(ev) {
27                     if(parseInt(end) < 0 && $(document).scrollTop() == 0) {
28                         $(".update").html('<span class="loading"></span>加载中...');
29                         //GetList(obj);向后台请求数据
30                         window.location.reload();//刷新整个页面
31                         setTimeout(function() {
32                             $(".update").remove();
33                             ele.css('top',0);
34                         }, 2500);
35                     }
36                 }
37             }

 

posted @ 2017-08-24 14:58  web_study  阅读(3067)  评论(0)  编辑  收藏  举报

哈哈