下拉刷新，上拉加载功能--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是一个高性能,资源 ...
随机推荐
- STemWin显示汉字 — SD卡外挂XBF字库
转载注明出处 方法来自安福莱教程 1: 使用emWin自带小工具生成字库 (1)启动软件 选择4位抗锯齿 (2)根据需求选择字体类型和字体大小 (3)另存为XBF格式 2: 创建XBF字体 #inc ...
- LeetCode：矩形区域【223】
LeetCode:矩形区域[223] 题目描述 在二维平面上计算出两个由直线构成的矩形重叠后形成的总面积. 每个矩形由其左下顶点和右上顶点坐标表示,如图所示. 示例: 输入: -3, 0, 3, 4, ...
- Redis 的持久化与过期键
简介 Redis 是使用非常广泛的 Key-Value 内存数据库.因为数据都存放在内存中,所以存取速度非常快.不过,很多情况下我们需要将 Redis 中的数据保存到硬盘中以便做备份.Redis 提供 ...
- EASYARM-IMX283 烧写uboot和linux系统
新入手一台EASYARM-IMX283开发板(以下简称IMX823),价格比较便宜,配置也不错. 开发板默认安装了WINCE,我还是决定重新烧写uboot和linux内核. 开发板配套光盘里面有不少烧 ...
- 《CSS权威指南（第三版）》---第五章 字体
这章主要的内容有: 1.字体:一般使用一种通用的字体. 2.字体加粗:一般从数字100 -900 . 3.字体大小:font-size 4.拉伸和调整字体:font-stretch 5.调整字体大小: ...
- HDU 1032 The 3n + 1 problem （这个题必须写博客）
The 3n + 1 problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- 【html学习整理】meta,img,表格,表单
meta标签: 作用: 给搜索引擎用 . 告诉浏览器是什么编码 <meta charset="UTF-8"> <meta name="keywords& ...
- tkinter之button
Button按钮,直接上代码: from tkinter import * def gs(): global read s=Label(read,text='昨夜西风凋敝树,堵上高楼,望尽天涯路!', ...
- PHP相关安全配置【转】
PHP是广泛使用的开源服务端脚本语言.通过HTTP或HTTPS协议,Apache Web服务允许用户访问文件或内容.服务端脚本语言的错误配置会导致各种问题.因此,PHP应该小心使用.以下是为系统管理员 ...
- 002-CSS基础
1 CSS和文档 CSS 层叠样式表 元素 每个元素都会生成一个框(box) 元素 = 替换元素 + 非替换元素 替换元素 显示的内容是元素内的某个属性而不是元素本身, 如img 非替换元素 大部分类 ...