这段时间工作太忙了，没时间更新博客内容，在这段时间，也学习到了不少新的知识。今天先整理一下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>