你的位置:首页 > Java教程

[Java教程]分页插件思想:pc加载更多功能和移动端下拉刷新加载数据


  感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo!

  这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧!

  直接上代码分析下吧!

布局:

<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='http://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>

View Code

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

移动端下拉事件就一笔带过了,可以参考我写的有关于移动化滑动事件的博文!

鄙人技术有限,若有不妥,望不吝赐教!