jQuery教程如何实现下拉刷新、加载数据功能-职坐标

jQuery教程如何实现下拉刷新、加载数据功能

沉沙 2018-09-17 来源：阅读 756 评论 0

摘要：本篇教程介绍了jQuery教程如何实现下拉刷新、加载数据功能，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程如何实现下拉刷新、加载数据功能，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

布局：

<ul class="show-area" style="min-height:100px;"></ul>
<button class='page-btn-nick' >加载更多</button>

　　就2行，只为实现功能，足矣！
　　js也不复杂，先定义2个变量，贯穿整个demo，进了不要全局变量，当然，封装的时候也可以当做闭包参数！

var m=0,n=2;//m:button点击次数 n:一次加载几条数据

请求：

$.ajax('paging.html')

　　这里我就写的本页面地址作为测试url。
下面请求成功后的处理就是重点了：

                    var obj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]}
                    response=obj.developer;//假设请求到的数据是obj
                    m++;
                    var data='',elm='';
                    if(m>(response.length%n==0?response.length/n:parseInt(response.length/n))){
                        data=response.slice(n*(m-1));
                        $('.page-btn-nick').html('没有更多了');
                        $('.page-btn-nick').attr('disabled','disabled');
                    }else{
                        data=response.slice(n*(m-1),n*m);
                    }

中心思想：
　　请求按钮点击一次，m+1，讲请求的数据拆分，只要需要的数据data；

data=response.slice(n*(m-1),n*m);

　　slice(s,e)函数获取请求到的数据的一部分，s：response的起始位置，e结尾位置（取不到e位置的元素），返回值是一个含头不含尾的数组。
这里由于开始默认加载n条数据，m已经加了一次1了，所以要s和e要对应的改变；
将数据动态加载到页面：

                    var len=data.length;
                    for(var i= 0;i<len;i++){
                        elm+="<li>"+data[i].name+"</li>";
                    }
                    $('.show-area').append(elm);

这里的append()要比html()更优！
　　我看有些developer是勇的html()，这样每加载一次，页面中的所有li将全部清空，在重新加载所有的li，感觉每次加载都要加载有点多余的数据，浪费啊……
　　看上面的数据就知道，我是讲每次请求的数据在slice()一次，在添加到页面。这要写我每加载一次，只把这次加载的数据append到ul的最后，以前的li并不会清空，这要加载的数据就是每次想要多加的必要数据，没有重复添加，感觉给力点吧！
　　后面我把请求数据的getData()作为button点击事件处理函数，同时放在判断后的下拉事件中，就可以实现点击按钮动态加载数据和下拉刷新加载数据了！
最后附上完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>paging nick</title>
    <style>
    </style>
</head>
<body>
    <ul class="show-area" style="min-height:100px;"></ul>
    <button class='page-btn-nick' >加载更多</button>
    <script src='//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script>
    <script>
        ;(function(){
            getData();
            var m=0,n=2;//m:button点击次数 n:一次加载几条数据
            $('.page-btn-nick').click(getData);
            function getData(){
                $.ajax('paging.html').then(function(response){//测试url写本页面
                    var obj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]}
                    response=obj.developer;//假设请求到的数据是obj
                    m++;
                    var data='',elm='';
                    if(m>(response.length%n==0?response.length/n:parseInt(response.length/n))){
                        data=response.slice(n*(m-1));
                        $('.page-btn-nick').html('没有更多了');
                        $('.page-btn-nick').attr('disabled','disabled');
                    }else{
                        data=response.slice(n*(m-1),n*m);
                    }
                    var len=data.length;
                    for(var i= 0;i<len;i++){
                        elm+="<li>"+data[i].name+"</li>";
                    }
                    $('.show-area').append(elm);
                },function(err){
                    console.log(err);
                });
            }

            $(".show-area").on("touchstart", function(e) {
                e.preventDefault();
                startX = e.originalEvent.changedTouches[0].pageX,
                        startY = e.originalEvent.changedTouches[0].pageY;
            });
            $(".show-area").on("touchmove", function(e) {
                e.preventDefault();
                moveEndX = e.originalEvent.changedTouches[0].pageX,
                        moveEndY = e.originalEvent.changedTouches[0].pageY,
                        X = moveEndX - startX,
                        Y = moveEndY - startY;

                if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
                    alert("left 2 right");
                }
                else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
                    alert("right 2 left");
                }
                else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
                    alert("top 2 bottom");
                    getData();
                }
                else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
                    alert("bottom 2 top");
                }
                else{
                    alert("just touch");
                }
            });
        }());
    </script>
</body>
</html>

　　可以直接复制完整代码，webstorm打开看看看，测试下吧！