介绍一款移动端滚动加载的插件---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 ...
随机推荐
- HTML5中Web存储
HTML5 中web存储是一个比cookies更好的一个本地存储方式. 那么什么是HTML5存储呢? 使用HTML5可以在本地存储用户浏览的数据,HTML5技术没有出来之前是使用cookies进行本地 ...
- redis基础知识学习
数据结构:1.String 添加: set key value get key getset key value (先get再set) incr key (key对应value原子性递增1) decr ...
- iOS应用架构谈－part1概述
当我们讨论客户端应用架构的时候,我们在讨论什么? 其实市面上大部分应用不外乎就是颠过来倒过去地做以下这些事情: --------------- --------------- ------------ ...
- nodejs写一个简单的Web服务器
目录文件如 httpFile.js如下: const httpd = require("http"); const fs = require("fs"); // ...
- tensorflow目标检测API之训练自己的数据集
1.训练文件的配置 将生成的csv和record文件都放在新建的mydata文件夹下,并打开object_detection文件夹下的data文件夹,复制一个后缀为.pbtxt的文件到mtdata文件 ...
- python生成四位随机数
有些时候需要发送短信给用户生成四位随机数字,这里在python中我们可以根据python自带的标准库random和string来实现. random下有三个可以随机取数的函数,分别是choice,ch ...
- GoF23种设计模式之行为型模式之观察者模式
一.概述 定义对象之间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新.二.适用性1.当一个抽象模型有两个方面,其中一个方面依赖于另一方面的时 ...
- python基础-面向对象的三大特征
继承 单继承 父类 基类 子类 派生类 继承:是面向对象软件技术当中的一个概念,如果一个类别A“继承自”另一个类别B,就把这个A称为“B的子类别”,而把B称为“A的父类别”也可以称“B是A的超类”. ...
- logging记录了其他操作的问题
做atm作业的时候,记录转账操作的那个功能的文件里,同时也记录了增加账号和冻结账号的操作 2018-11-28 17:14:51,754 : transfer : INFO : 用户edward向用户 ...
- stm32L0工程建立（HAL+IAR，无cubemx）
https://files.cnblogs.com/files/CodeWorkerLiMing/STM32HAL%E5%BA%93%E5%AD%A6%E4%B9%A0%E2%80%94%E5%B7% ...