介绍一款移动端滚动加载的插件---dropload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<link href="dropload-gh-pages/dist/dropload.css" rel="stylesheet">
<script src="dropload-gh-pages/examples/js/jquery.min.js"></script>
<script src="dropload-gh-pages/dist/dropload.min.js"></script>
<title>Title</title>
</head>
<body>
<div class="content">
<div class="lists"></div>
</div>
<script>
$(function(){
// 页数
var page = 0;
// 每页展示5个
var size = 5; // dropload
$('.content').dropload({
scrollArea : window,
loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
$.ajax({
type: 'GET',
url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
dataType: 'json',
success: function(data){
var arrLen = data.length;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
result += '<a class="item opacity" href="'+data[i].link+'">'
+'<img src="'+data[i].pic+'" alt="">'
+'<h3>'+data[i].title+'</h3>'
+'<span class="date">'+data[i].date+'</span>'
+'</a>';
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.lists').append(result);
// 每次数据插入，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
}
});
});
</script>
</body>
</html>
介绍一款移动端滚动加载的插件---dropload的更多相关文章
- 基于jquery鼠标或者移动端滚动加载数据
基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
- js滚动加载小插件
本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...
- 介绍一款可以滚动加载的插件droploader
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]
使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...
- antd图标库按需加载的插件实现
前景概要 antd是阿里出品的一款基于antd的UI组件库,使用简单,功能丰富,被广泛应用在中台项目开发中,虽然也出现了彩蛋事故,但不能否认antd本身的优秀,而我们公司在实际工作中也大量使用antd ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- [转] Jquery滚动加载
原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...
随机推荐
- java开发微信公众号----开发者基本配置的
首先附上微信公众平台开发技术文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1472017492_58YV5 本文主要描 ...
- OI杂记
从今天开始记录一下为数不多天的OI历程 8.25 上 今天举行了难得的五校联考,模拟noip,题目的解压密码竟然是$aKnoIp2o18$,对你没有看错!!! 7:50老师?啊啊啊啊,收不到题目啊,还 ...
- paper:synthesizable finit state machine design techniques using the new systemverilog 3.0 enhancements之fsm summary
主要是1.不要用1段式写FSM 2.不要用状态编码写one-hot FSM ,要用索引编码写one-hot FSM.
- 能力不足之 根据时序图转化为Verilog代码
不能够把时序图看的非常透彻,然后把时序图写成Verilog代码,有时候甚至搞不清楚信号之间的时序关系.
- 【js】【转发】jreturn；、return true、return false;区别
一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制, 无函数结果,语法为:return; 在大多数情况下,为事件 ...
- 【jquery】 选中复选框 和 return false 的影响
$('id').attr('checked',true); return false; 如果后面接上return false 的话,复选框的钩钩不会改变,但是.is(':checked')仍然能检 ...
- JAVA基础篇—Servlet小结
一.get请求和post请求的区别: 1.get请求是通过url传递参数,post请求是通过请求体传递参数的 2.get请求最多允许传递255个字符,对长度有限制,所以数据比较大的时候我们使用post ...
- 学习ucosii要用到的几本书
转自:http://bbs.elecfans.com/jishu_551275_1_1.html 1.嵌入式实时操作系统μC/OS-II(第2版) 邵贝贝 等译 北京航空航天大学出版社 ...
- 重新造轮子之静态链接1(Static linking)
最近学习计算机病毒学的过程中,又讲到了静态链接的问题,联想到了之前保健哥在信息安全的课堂上向我们展示了一个没有main()函数的C程序到底应该如何编写.个人觉得这个小实验对于加深静态链接的过程的理解也 ...
- 使用MeidaStore.Audio获得手机中的音频文件
MediaStore是安卓系统自带的多媒体系统数据库,他在每次开机时刷新一次,可以通过Cursor这个类对数据库进行访问与修改,修改之后需用广播强制刷新. 使用Cursor必须通过Context获得C ...