下拉刷新，上拉加载功能--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是一个高性能,资源 ...
随机推荐
- nodejs 基础篇整合
nodeJs 基础篇整合 最近有朋友也想学习nodeJs相关方面的知识,如果你是后端想接近前端,node作为一门跑在服务端的JS语言从这里入门再好不过了.如果你正好喜欢前端,想走的更高,走的更远.no ...
- mvc Bundling 学习记录（一）
参考博客:http://www.cnblogs.com/xwgli/p/3296809.html 这里要详细记录的是对于现有MVC项目进行Bundling功能 1 如果没有System.Web.Op ...
- g2o求解BA 第10章
1.g2o_bal_class.h1.1 projection.hg2o还是用图模型和边,顶点就是相机和路标,边就是观测,就是像素坐标.只不过这里的相机是由旋转(3个参数,轴角形式,就是theta*n ...
- Linux三种网络-vmware三种网络模式
Host-Only 桥接 NAT VMware虚拟机三种联网方法及原理 一.Brigde——桥接:默认使用VMnet0 1.原理: Bridge 桥"就是一个主机,这个机器拥有两块网卡,分别 ...
- html5实现进度条功能效果非常和谐
1. [图片] html5.jpg 2. [代码][HTML]代码 <script type="text/javascript"> var i = 0; ...
- SGU 495 Kids and Prizes：期望dp / 概率dp / 推公式
题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=495 题意: 有n个礼物盒,m个人. 最开始每个礼物盒中都有一个礼物. m个人依次随 ...
- Proftpd mysql认证配置文档
Proftpd mysql认证配置文档 ver1.0, 2012/09/25 一.下载安装proftp mysql 下载 wget http://cloud.github.com/downloads/ ...
- 分享知识-快乐自己：SpringMVC 底层执行原理解析
底层实现原理图: 观看底层代码: 1):打开 web.xml 文件 2):按住 Ctrl + 鼠标左键 进入底层查看源码 3):按住 Ctrl+o 找到对应的方法doDispatch 5): ...
- linux命令学习笔记（54）：ping命令
Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器, 看是不是开着”.不能打开网页时会说“你先ping网关地址192.168.1.1试试” ...
- BZOJ_2802_[Poi2012]Warehouse Store_堆+贪心
BZOJ_2802_[Poi2012]Warehouse Store_堆+贪心 Description 有一家专卖一种商品的店,考虑连续的n天. 第i天上午会进货Ai件商品,中午的时候会有顾客需要购买 ...