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>
可以直接复制完整代码，webstorm打开看看看，测试下吧！
移动端下拉事件就一笔带过了，可以参考我写的有关于移动化滑动事件的文章！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现滚动条滚动到页面底部继续加载
这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的.但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得. 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据.关键是计算滚动条是否滚动到了浏览器底部,算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/:如果这个判断为true则表示滚动条滚动到了底部. 实例 <
-
js仿手机页面文件下拉刷新效果
最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 要在仿真器下才能看到效果,比如chrome的里边(或者用手机浏览器查看,但测试发现有些浏览器有问题,目前手机猎豹是没问题的) 主要就是: 下拉-->提示松开刷新-->松开后-->开始刷新-->刷新成功后还原 html,css部分 style type="text/css"> #slideDown{margin-top: 0;width: 100%;} #slideDown1,#slideDown2{wi
-
纯javascript实现简单下拉刷新功能
代码很简单,实现的功能却很实用,直接奉上代码 CSS: 复制代码 代码如下: <meta charset="utf-8" /> <title>Pull to Refresh</title> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-sca
-
探索angularjs+requirejs全面实现按需加载的套路
在进行有一定规模的项目时,通常希望实现以下目标:1.支持复杂的页面逻辑(根据业务规则动态展现内容,例如:权限,数据状态等):2.坚持前后端分离的基本原则(不分离的时候,可以在后端用模版引擎直接生成好页面):3.页面加载时间短(业务逻辑复杂就需要引用第三方的库,但很可能加载的库和用户本次操作没关系):4,还要代码好维护(加入新的逻辑时,影响的文件尽量少). 想同时实现这些目标,就必须有一套按需加载的机制,页面上展现的内容和所有需要依赖的文件,都可以根据业务逻辑需要按需加载.最近都是基于angula
-
js插件dropload上拉下滑加载数据实例解析
本文实例为大家分享了dropload插件上拉下滑加载数据的具体代码,供大家参考,具体内容如下 效果图: 1.导入js dropload.min.js zepto.min.js <!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 --> 2.后台查询 /** * 我找的劵 * * @return */ @Action("IFindTicket") public String IFindTicket() { try { FuTransactio
-
js 控制下拉菜单刷新的方法
思路:母版頁隱藏控件 從内容頁接收值 JS根據接受的值控制菜單項的現實母版頁:隱藏控件: 复制代码 代码如下: <asp:Label ID="Lbl_X" runat="server" Text="text" style="display:none"></asp:Label><asp:Label ID="Lbl_Xn" runat="server" Text
-
Listloading.js移动端上拉下拉刷新组件
listloading是一个移动端的上拉.下拉加载更多的组件.主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在.如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦.listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll
-
JS判断移动端访问设备并加载对应CSS样式
JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) 复制代码 代码如下: // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-
-
APP中javascript+css3实现下拉刷新效果
原生app里的数据列表都会使用下拉刷新的效果,在webapp里可以采用iscroll.swiper等插件或框架实现,那么如何自己编码实现类似的效果呢,下面介绍使用原生js+css3实现的简单效果. html布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-
-
iscroll.js的上拉下拉刷新时无法回弹的解决方法
使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解决不了这个问题,干脆就那样不解决了,还有的直接就不用HTML了,使用原生代替HTML页面. 相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案.在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助. 上拉下拉刷新的主要代码: myScroll = new iScrol