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打开看看看，测试下吧！
移动端下拉事件就一笔带过了，可以参考我写的有关于移动化滑动事件的文章！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。