这段时间工作太忙了，没时间更新博客内容，在这段时间，也学习到了不少新的知识。今天先整理一下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的使用
原文地址：https://www.cnblogs.com/bllx/p/8905792.html