pc加载更多功能和移动端下拉刷新加载数据

时间：2021-05-26

感觉一个人玩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>

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章