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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 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
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
js的一些常用方法小结
2011/06/29 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
python类型强制转换long to int的代码
2013/02/10 Python
小结Python用fork来创建子进程注意事项
2014/07/03 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
机电专业毕业生推荐信
2013/11/10 职场文书
高中体育教学反思
2014/01/24 职场文书
中华魂演讲稿
2014/05/13 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
服装设计师求职信
2014/06/04 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
导游词之崇武古城
2019/10/07 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers