介绍一款移动端滚动加载的插件---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 ...
随机推荐
- 抓取oracle建表语句及获取建表ddl语句
抓取oracle建表语句及获取建表ddl语句 1.抓取代码如下: 1.1.产生表的语法资料 DECLARE-- v_notPartTable VARCHAR2(1000):= '&2'; -- ...
- cocos2dx通过ndk编译c++库
ndk编译c++库,然后通过jni调用实现重要代码封装,是安卓应用中最常用的技术,一方面可以将重要的代码实现隐藏,防止泄漏,也可以提高打包速度. ndk里面的sample文件夹中有很多实用的例子,其中 ...
- VueJS坎坷之路222--vue cli 3.0引入静态文件
前两天准备搭建一个vue小项目,当引入jquery脚本的时候一直找不到引入的文件: 在网上搜了好多vue添加静态文件的方法,发现大多数方法都是创建一个与文件夹src同等级的文件夹static存放引入的 ...
- [BZOJ] 1127: [POI2008]KUP
似曾相识的感觉 考虑另一个判断问题,给定一个k,问这个k是否可行 存在矩形和\(sum>2k\),则该矩阵不对判定做出贡献 存在矩形和\(sum\in [k,2k]\),则我们找到了一个解 于是 ...
- hibernate简介以及简单配置
Hibernate简介: Hibernate是一个开源对象关联关系映射的框架,他对JDBC做了轻量级的封装,使我们可以通过面向对象的思想操作数据库. 为什么要用Hibernate: 1: 对JDBC访 ...
- windows使用批处理bat文件批量打开程序
windows命令行官网教程: https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/wind ...
- tuple 方法总结整理
#!/usr/bin/env python #Python 3.7.0 元祖常用方法 __author__ = "lrtao2010" #元祖和列表类似,只不过元祖一旦被创建一级元 ...
- LA 3790 Overlapping Squares DFS
题意: 给出一个字符矩阵,问能否是不超过6个2×2的正方形组成的. 分析: 每次找一个最表面的正方形然后DFS就好了. 一个正方形被移开后,用一个特殊符号标记上,下次再匹配的时候就直接忽略这些位置. ...
- 文件上传下载，命令之wget / curl / which / sort / uniq / cut / wc /tr /sed
目录 命令 1.文件的上传下载 2.从外网下载文件wget 3.curl文件下载 4.查找命令which 5.字符处理命令-排序sort 6.字符处理-去重uniq 7.字符处理-截取cut 8.字符 ...
- Hive中集合类型
Hive中集合类型 创建表,集合是以 - 分割的 数据文件 加载数据 查询数据 查询数组中第一个字段 再建一个表,使用map 查看数据文件 加载数据 查询数据 查询键值 创建表,struct类型 查看 ...