pc加载更多功能和移动端下拉刷新加载数据
感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo!
这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧!
直接上代码分析下吧!
布局:
<ulclass="show-area"style="min-height:100px;"></ul> <buttonclass='page-btn-nick'>加载更多</button>
就2行,只为实现功能,足矣!
js也不复杂,先定义2个变量,贯穿整个demo,进了不要全局变量,当然,封装的时候也可以当做闭包参数!
varm=0,n=2;//m:button点击次数n:一次加载几条数据
请求:
$.ajax('paging.html')
这里我就写的本页面地址作为测试url。
下面请求成功后的处理就是重点了:
varobj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]} response=obj.developer;//假设请求到的数据是obj m++; vardata='',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要对应的改变;
将数据动态加载到页面:
varlen=data.length; for(vari=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点击事件处理函数,同时放在判断后的下拉事件中,就可以实现点击按钮动态加载数据和下拉刷新加载数据了!
最后附上完整代码:
<!DOCTYPEhtml> <html> <head> <metacharset='utf-8'> <metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"name="viewport"> <title>pagingnick</title> <style> </style> </head> <body> <ulclass="show-area"style="min-height:100px;"></ul> <buttonclass='page-btn-nick'>加载更多</button> <scriptsrc='http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script> <script> ;(function(){ getData(); varm=0,n=2;//m:button点击次数n:一次加载几条数据 $('.page-btn-nick').click(getData); functiongetData(){ $.ajax('paging.html').then(function(response){//测试url写本页面 varobj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]} response=obj.developer;//假设请求到的数据是obj m++; vardata='',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); } varlen=data.length; for(vari=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("left2right"); } elseif(Math.abs(X)>Math.abs(Y)&&X<0){ alert("right2left"); } elseif(Math.abs(Y)>Math.abs(X)&&Y>0){ alert("top2bottom"); getData(); } elseif(Math.abs(Y)>Math.abs(X)&&Y<0){ alert("bottom2top"); } else{ alert("justtouch"); } }); }()); </script> </body> </html>
可以直接复制完整代码,webstorm打开看看看,测试下吧!
移动端下拉事件就一笔带过了,可以参考我写的有关于移动化滑动事件的文章!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。