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


Posted in Javascript onNovember 07, 2016

感觉一个人玩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打开看看看,测试下吧!

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML5实现留言和回复页面样式
Jul 22 Javascript
百度地图api如何使用
Aug 03 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
jquery html5 视频播放控制代码
Nov 06 #Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 #Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 #Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 #Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 #Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 #Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 #Javascript
You might like
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php过滤危险html代码
2008/08/18 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
javascript之锁定表格栏位
2007/06/29 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
WebPack基础知识详解
2017/01/16 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
python代码过长的换行方法
2018/07/19 Python
Tensorflow 多线程设置方式
2020/02/06 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
《动手做做看》教学反思
2014/04/09 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python