下拉刷新，上拉加载功能--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是一个高性能,资源 ...
随机推荐
- AR模型脱卡，unity端实现步骤详情
AR模型脱卡unity端实现具体步骤 AR模型脱卡的原理 利用一些unity端AR插件做AR应用.通常会有一个需求,当识别物消失的时候,将3D模型从识别物这个父物体上移除,显示在屏幕中央.那么原理就显 ...
- 微信公众号验证TOKEN
服务端验证微信token header('Content-type:text'); define("TOKEN", "weixin"); $signature ...
- webpack-dev-server原理及要点笔记
webpack-dev-server启动了一个使用express的Http服务器,这个服务器与客户端采用websocket通信协议,当原始文件发生改变,webpack-dev-server会实时编译. ...
- 【LeetCode】最大子序和
给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4], 输出: 6 解释: 连续子数组 ...
- 去js校验
1.首先,找到项目所在的路径 2.关掉eclipse,找到项目文件 3.打开.project
- PHP按照比例随机
有这样的需求,在打开链接的时候,随机(按照项目的某个属性的比例随机)跳转到指定的几个项目的某一个项目页面 比如项目A:80 项目B:20 那么跳转到项目A 的比例为80%,项目B的比例为20% 那么 ...
- html5--1.10绝对路径和相对路径
html5--1.10绝对路径和相对路径 学习要点: 绝对路径和相对路径 1.绝对路径 需要指出链接资源的绝对位置,与你的HTML文档的位置无关: 1. 服务器中的位置:href="http ...
- 改变Ecplise项目窗口字体样式
Eclipse\plugins\org.eclipse.ui.themes_1.1.1.v20151026-1355\css e4-dark_win.css CTabFolder Tree, CTab ...
- 【HDU 4807】Lunch Time 最小费用最大流
题意 在一个有向图当中,现在每一条边带有一个容量,现在有K个人在起点,需要到终点去吃饭,询问这K个人最后一个人到达食堂的最小时间是多少 贴一篇题解:http://blog.csdn.net/u0137 ...
- MySQL11月16-11月21日活动赠送的优惠券使用率_20161124
一.11.16到21号活动规则是 单笔订单最高的金额划分客户为399,799,1599元三档 达标的分别赠送对应的优惠券 优惠券ID有标号区间 THEN "1599档" ELSE ...