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

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

鄙人技术有限,若有不妥,望不吝赐教!

分页插件思想:pc加载更多功能和移动端下拉刷新加载数据的更多相关文章

  1. Android UI--自定义ListView(实现下拉刷新+加载更多)

    Android UI--自定义ListView(实现下拉刷新+加载更多) 关于实现ListView下拉刷新和加载更多的实现,我想网上一搜就一堆.不过我就没发现比较实用的,要不就是实现起来太复杂,要不就 ...

  2. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  3. 【Web】移动端下拉刷新、上拉加载更多插件

    移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...

  4. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  5. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  6. Android Demo 下拉刷新+加载更多+滑动删除

    小伙伴们在逛淘宝或者是各种app上,都可以看到这样的功能,下拉刷新和加载更多以及滑动删除,刷新,指刷洗之后使之变新,比喻突破旧的而创造出新的,比如在手机上浏览新闻的时候,使用下拉刷新的功能,我们可以第 ...

  7. Android之RecyclerView轻松实现下拉刷新和加载更多

    今天研究了下RecyclerView的滑动事件,特别是下拉刷新和加载更多事件,在现在几乎所有的APP显示数据列表时都用到了.自定义RecyclerView下拉刷新和加载更多听上去很复杂,实际上并不难, ...

  8. RecyclerView的下拉刷新和加载更多 动画

    下拉刷新和加载更多 1.https://github.com/jianghejie/XRecyclerView 2.http://blog.csdn.net/jabony/article/detail ...

  9. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]

    使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...

随机推荐

  1. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  2. Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作

    Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 1.实施前准备工作 1.1 服务器安装操 ...

  3. Microservice架构模式简介

    在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...

  4. 说说Golang的使用心得

    13年上半年接触了Golang,对Golang十分喜爱.现在是2015年,离春节还有几天,从开始学习到现在的一年半时间里,前前后后也用Golang写了些代码,其中包括业余时间的,也有产品项目中的.一直 ...

  5. 浅谈WEB页面提速(前端向)

    记得面试现在这份工作的时候,一位领导语重心长地谈道——当今的世界是互联网的世界,IT企业之间的竞争是很激烈的,如果一个网页的加载和显示速度,相比别人的站点页面有那么0.1秒的提升,那也是很大的一个成就 ...

  6. MAC下 mysql不能插入中文和中文乱码的问题总结

    MAC下 mysql不能插入中文和中文乱码的问题总结 前言 本文中所提到的问题解决方案,都是基于mac环境下的,但其他环境,比如windows应该也适用. 问题描述 本文解决下边两个问题: 往mysq ...

  7. ZKWeb网页框架1.1正式发布

    发行日志 https://github.com/zkweb-framework/ZKWeb/blob/master/ReleaseNotes/ReleaseNote.1.1.md 主要改动 添加EFC ...

  8. CSS知识总结(九)

    CSS常用样式 10.自定义动画 1)关键帧(keyframes) 被称为关键帧,其类似于Flash中的关键帧. 在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“ ...

  9. 代码的坏味道(15)——冗余类(Lazy Class)

    坏味道--冗余类(Lazy Class) 特征 理解和维护类总是费时费力的.如果一个类不值得你花费精力,它就应该被删除. 问题原因 也许一个类的初始设计是一个功能完全的类,然而随着代码的变迁,变得没什 ...

  10. MySQL数据库罕见的BUG——Can't get hostname for your address

    在连接mysql jdbc时候,抛出了 com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Communicat ...