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

感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo!

这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧!

直接上代码分析下吧!

布局:

就2行,只为实现功能,足矣!

js也不复杂,先定义2个变量,贯穿整个demo,进了不要全局变量,当然,封装的时候也可以当做闭包参数!

请求:

这里我就写的本页面地址作为测试url。

下面请求成功后的处理就是重点了:

(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要对应的改变;

将数据动态加载到页面:

"; } $('.show-area').append(elm);

这里的append()要比html()更优!

我看有些developer是勇的html(),这样每加载一次,页面中的所有li将全部清空,在重新加载所有的li,感觉每次加载都要加载有点多余的数据,浪费啊……

看上面的数据就知道,我是讲每次请求的数据在slice()一次,在添加到页面。这要写我每加载一次,只把这次加载的数据append到ul的最后,以前的li并不会清空,这要加载的数据就是每次想要多加的必要数据,没有重复添加,感觉给力点吧!

后面我把请求数据的getData()作为button点击事件处理函数,同时放在判断后的下拉事件中,就可以实现点击按钮动态加载数据和下拉刷新加载数据了!

最后附上完整代码:

paging nick

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


js中event的用法
js中能调用python吗
js中split的用法
js怎么设置边框样式
js中截取字符串的方法
js中innerhtml的用法
javascript的成熟分类方式有哪些
js中document是什么意思
js怎样让div中的文字居中
js中怎样定义一个对象
javascript的成熟分类介绍
js中parseint什么意思
js中字符串如何排序
void在js中是什么意思
js中如何定义函数
js中arguments是什么意思
js中什么是同步和异步
js中如何sleep一秒
js中ui函数是什么意思
js中如何遍历数组