下拉刷新，上拉加载功能--dropload.js的使用
这段时间工作太忙了，没时间更新博客内容，在这段时间，也学习到了不少新的知识。今天先整理一下dropload.js的使用方法吧，这个是在为项目中使用过的插件，很好用，但是真正用到项目中还是会有一些小小的问题，这个要具体问题具体分析了。
插件下载地址：https://github.com/ximan/dropload。大家也可以直接看源码
我的代码地址: https://github.com/dreamITGirl/projectStudy,大家可以在里面查找。
首先，这个插件是依赖于jQuery或Zepto的，所以，使用时需要引入它们其中之一。
先说一下上拉加载功能吧----用户在上拉到数据底部时，会触发上拉加载，向服务器请求新的数据，并渲染出来。
代码：只有下拉刷新功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<title>下拉刷新</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/dropload.css">
<style>
html {
font-size: 14px;
} .container {
width: 100%;
height: auto;
} .header {
width: 100%;
height: 4rem;
background: #dddddd;
color: #080808;
position: fixed;
top: 0;
left: 0;
z-index: 10;
line-height: 4rem;
text-align: center;
} .clear {
content: "";
width: 100%;
height: 4rem;
} .list {
background: #fff;
} .list-item {
display: flex;
height: 5rem;
line-height: 2;
border-bottom: 1px solid #dddddd;
} ul .list-item:last-child {
border: none;
} .imgStyle {
width: 3rem;
height: 3rem;
border: 1px solid #ddd;
margin: .5rem;
} .list-item div {
width: 57%;
word-break: break-word;
color: #333;
margin-right: .5rem;
} .dates {
margin-top: 1.6rem;
color: #999;
}
</style>
</head>
<body>
<div class="header">标题部分</div>
<div class="clear"></div>
<div class="container">
<ul class="list"></ul>
</div>
<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/dropload.js"></script>
<script>
$(function () {
var page = 0;
var pageSize = 5;
//dropload
$('.container').dropload({
scrollArea: window,
loadDownFn: function (me) {
page++;
var html = "";
$.ajax({
type: 'get',
url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + pageSize,
dataType: 'json',
success: function (data) {
console.log(data);
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
html += `<li class="list-item">
<img src="${data[i].pic}" class="imgStyle">
<div class="pro_title">${data[i].title}</div>
<p class="dates">${data[i].date}</p>
</li>`
} } else {
me.lock();
me.noData();
}
setTimeout(function () {
$('.list').append(html);
me.resetload();//每次追加完数据后重置
}, 10) },
error: function (err) {
console.log(err);
me.resetload();//失败了也要重置
}
})
} })
})
</script>
</body>
</html>
其二：下拉加载和上拉刷新
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<title>下拉刷新+上拉加载</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/dropload.css">
<style>
html {
font-size: 14px;
} .container {
width: 100%;
height: auto;
} .header {
width: 100%;
height: 4rem;
background: #dddddd;
color: #080808;
position: fixed;
top: 0;
left: 0;
z-index: 10;
line-height: 4rem;
text-align: center;
} .clear {
content: "";
width: 100%;
height: 4rem;
} .list {
background: #fff;
} .list-item {
display: flex;
height: 5rem;
line-height: 2;
border-bottom: 1px solid #dddddd;
} ul .list-item:last-child {
border: none;
} .imgStyle {
width: 3rem;
height: 3rem;
border: 1px solid #ddd;
margin: .5rem;
} .list-item div {
width: 57%;
word-break: break-word;
color: #333;
margin-right: .5rem;
} .dates {
margin-top: 1.6rem;
color: #999;
}
</style>
</head>
<body>
<div class="header">标题部分</div>
<div class="clear"></div>
<div class="container">
<ul class="list"></ul>
</div>
<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/dropload.js"></script>
<script>
$(function () {
var page = 0;
var pageSize = 5;
$('.container').dropload({
scrollArea: window,
domUp: {//编写刷新的样式内容
domClass: 'droplaod-up',
domRefresh: '<div class="dropload-refresh">刷新</div>',
domUpdate: '<div class="dropload-update">释放更新数据</div>',
domLoad: '<div><span class="loading"></span>加载中,请耐心等待</div>'
},
domDown: {//编写加载数据的样式内容
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh">加载更多</div>',
domLoad: '<div><span class="loading"></span>加载中,请耐心等待</div>',
dropNoData: '<div class="dropload-noData">暂无更多数据</div>'
},
loadDownFn: function (me) {
page++;
var html = "";
$.ajax({
type: 'get',
url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + pageSize,
dataType: 'json',
success: function (data) {
console.log(data);
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
html += `<li class="list-item">
<img src="${data[i].pic}" class="imgStyle">
<div class="pro_title">${data[i].title}</div>
<p class="dates">${data[i].date}</p>
</li>`
} } else {
me.lock();
me.noData();
}
setTimeout(function () {
$('.list').append(html);
me.resetload();//每次追加完数据后重置
}, 10) },
error: function (err) {
console.log(err);
me.resetload();//失败了也要重置
}
})
},
loadUpFn: function (me) {
$.ajax({
type: 'get',
url: '../json/update.json',
dataType: 'json',
success: function (data) {
console.log(data);
var str = "";
for (var j = 0; j < data.lists.length; j++) {
str += `<li class="list-item">
<img src="${data.lists[j].pic}" class="imgStyle">
<div class="pro_title">${data.lists[j].title}</div>
<p class="dates">${data.lists[j].date}</p>
</li>`;
}
setTimeout(function () {
$('.list').html(str);
me.resetload();//每次加载完数据后重置
page = 0;
me.unlock();//解锁loadDownFn中的内容
me.noData(false)
}, 10)
},
error: function (err) {
console.log(err);
me.resetload();//每次加载完数据后重置
}
})
},
threshold: 50 })
})
</script>
</body>
</html>
最后，在具有tab切换功能时，有下拉加载功能
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<title>tab切换加载更多数据</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/dropload.css">
<style>
html {
font-size: 14px;
} .container {
width: 100%;
height: auto;
} .header {
width: 100%;
height: 4rem;
background: #dddddd;
color: #080808;
position: fixed;
top: 0;
left: 0;
z-index: 10;
line-height: 4rem;
text-align: center;
} .clear {
content: "";
width: 100%;
height: 4rem;
} .list, .list2 {
background: #fff;
} .list-item, .list2-item {
display: flex;
height: 5rem;
line-height: 1.5;
border-bottom: 1px solid #dddddd;
} ul .list-item:last-child {
border: none;
} .imgStyle {
width: 3rem;
height: 3rem;
border: 1px solid #ddd;
margin: .5rem;
} .list-item div {
width: 57%;
word-break: break-word;
color: #333;
margin-right: .5rem;
} .dates {
margin-top: 1.6rem;
color: #999;
} .tab {
display: flex;
width: 100%;
height: 3rem;
line-height: 3rem;
} .item {
display: inline-block;
width: 50%;
height: 3rem;
text-align: center;
text-decoration: none;
color: #000000;
} .cur {
border-bottom: 2px solid #d43f3a;
} .hide {
display: none;
}
</style>
</head>
<body>
<div class="header">标题部分</div>
<div class="clear"></div>
<div class="tab">
<a href="javascript:;" class="item cur">手机菜单一</a>
<a href="javascript:;" class="item">手机菜单二</a>
</div>
<div class="container">
<ul class="list"></ul>
<ul class="list2 hide"></ul>
</div>
<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/dropload.js"></script>
<script>
var tab1Load = false;
var tab2Load = false;
var tabIndex = 0;
var pageStart = 0;
var pageEnd;
//切换菜单事件
$('.tab').on('click', '.item', function () {
var index = $(this).index();
tabIndex = index;
console.log(tabIndex);
$(this).addClass('cur').siblings().removeClass('cur');
$(this).parent().siblings('.container').children().eq(index).removeClass('hide').siblings().addClass('hide');
if (tabIndex == '0') {
console.log(tab1Load, tab2Load);
if (!tab1Load) {
dropload.unlock();
dropload.noData(false)
} else {
dropLoad.look('down');
dropLoad.noData();
}
} else {
if (!tab2Load) {
dropLoad.unlock();
dropLoad.noData(false)
} else {
dropLoad.look('down');
dropLoad.noData();
}
}
dropLoad.resetload()
});
//下拉刷新和上拉加载
var page = 0;
var pageSize = 5;
var counter = 0;
var dropLoad = $('.container').dropload({
scrollArea: window,
loadDownFn: function (me) {
counter++;
console.log(tabIndex);
console.log(tabIndex);
if (tabIndex == 0) {
$.ajax({
type: 'get',
url: '../json/more.json',
dataType: 'json',
success: function (data) {
console.log(data);
var str = "";
pageStart = pageSize * counter;
pageEnd = data.lists.length;
for (var j = pageStart; j < pageEnd; j++) {
str += `<li class="list-item">
<img src="${data.lists[j].pic}" class="imgStyle">
<div class="pro_title">${data.lists[j].title}</div>
<p class="dates">${data.lists[j].date}</p>
</li>`;
if ((j + 1) > data.lists.length) {
tab1Load = true;
me.look();
me.noData();
break;
}
}
;
setTimeout(function () {
$('.list').append(str);
me.unlock();
me.resetload();
}, 0)
},
error: function (err) {
console.log(err);
me.resetload()
}
})
} else {
var html = "";
$.ajax({
type: 'get',
url: '../json/update.json',
dataType: 'json',
success: function (data) {
console.log(data);
for (var i = 0; i < data.lists.length; i++) {
html += `<li class="list-item">
<img src="${data.lists[i].pic}" class="imgStyle">
<div class="pro_title">${data.lists[i].title}</div>
<p class="dates">${data.lists[i].date}</p>
</li>`;
}
setTimeout(function () {
$('.list2').append(html);
me.resetload();
}, 0)
},
error: function (data) {
me.resetload();
}
})
} }
}) </script>
</body>
</html>
下拉刷新，上拉加载功能--dropload.js的使用的更多相关文章
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- RecyclerView下拉刷新上拉加载（三）—对Adapter的封装
RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
随机推荐
- <JAVA图像学习笔记>关于Graphics/Graphics2D以及简单的几何图像制作（一个简单钟表的实现）
题外话:正好赶上OperatingSystem的作业要做一个模拟线程/进程调度的问题,决定用JAVA实现才发现这些内容和之前学过的GUI制作是两码事儿- -b 通过学习java.swing库的Acti ...
- 简单的可兼容所有浏览器的操作html元素的javascript框架
1.根据id名称取元素 $id(idName) 2.根据class定义取元素 $class(className)返回所有class被定义成className的元素数组,或者$Eclass(clas ...
- Web性能测试中的几个概念【转】
每秒查询率QPS:对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准,即每秒请求数,即最大谈吐能力. 并发数:并发数和QPS是不同的概念,一般说QPS会说多少并发用户下QPS,当QPS相同时, ...
- hdu 4704 sum（费马小定理+快速幂）
题意: 这题意看了很久.. s(k)表示的是把n分成k个正整数的和,有多少种分法. 例如: n=4时, s(1)=1 4 s(2)=3 1,3 3,1 2,2 s ...
- Mybatis异常_02_Result Maps collection already contains value for
一.异常 1.异常信息 2.异常原因 XXXMapper.xml文件中存在重名对象,保持名称不要一样即可正常启动. 我的原因是namespace与其他mapper 一样. 3.可能的原因 (1)nam ...
- linux 加密解密文件小程序
代码见下面,编译之后就可以用:建议放在bash下,或者添加环境变量. 使用方法:encrypt .两次输入密码.加密密码与解密密码不一致解码后就不是原文件了! #include <stdio.h ...
- Hotel California
On a dark desert highway行驶在昏黑的荒漠公路上cool wind in my hair凉风吹过我的头发warm smell of colutas温馨的大麻香rising up ...
- STL容器特征总结与迭代器失效
Vector 内部数据结构:连续存储,例如数组. 随机访问每个元素,所需要的时间为常量. 在末尾增加或删除元素所需时间与元素数目无关,在中间或开头增加或删除元素所需时间随元素数目呈线性变化. 可动态增 ...
- jQuery之简单的表单验证
html部分: <body> <form method="post" action=""> <div class="in ...
- java---集合类（1）
java.util包中包含了一系列重要的集合类.而对于集合类,主要需要掌握的就是它的内部结构,以及遍历集合的迭代模式. 接口:Collection Collection是最基本的集合接口,一个Coll ...