【Web】移动端下拉刷新、上拉加载更多插件
移动网站中常常有的功能：列表的下拉刷新、上拉加载更多
本例介绍一种简单使用的移动端下拉刷新、上拉加载更多插件，下载及参考地址：https://github.com/ximan/dropload
插件依赖
Zepto 或者 jQuery 1.7以上版本，推荐jQuery 2.x版本（二者不要同时引用）
Zepto or jQuery 1.7+，recommend to use jQuery 2.x（not use them at the same time）
使用方法
引入插件
<link rel="stylesheet" href="css/dropload.css">
<script src="js/dropload.min.js"></script>
初始化插件
$('.element').dropload({
scrollArea : window,
loadDownFn : function(me){
$.ajax({
type: 'GET',
url: 'json/more.json',
dataType: 'json',
success: function(data){
alert(data);
// 每次数据加载完，必须重置
me.resetload();
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
}
});
参数列表
| 参数 | 说明 | 默认值 | 可填值 |
|---|---|---|---|
| scrollArea | 滑动区域 | 绑定元素自身 | window |
| domUp | 上方DOM | { domClass : 'dropload-up', domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>', domUpdate : '<div class="dropload-update">↑释放更新</div>', domLoad : '<div class="dropload-load">○加载中...</div>' } |
数组 |
| domDown | 下方DOM | { domClass : 'dropload-down', domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>', domLoad : '<div class="dropload-load">○加载中...</div>', domNoData : '<div class="dropload-noData">暂无数据</div>' } |
数组 |
| autoLoad | 自动加载 | true | true和false |
| distance | 拉动距离 | 50 | 数字 |
| threshold | 提前加载距离 | 加载区高度2/3 | 正整数 |
| loadUpFn | 上方function | 空 | function(me){ //你的代码 me.resetload(); } |
| loadDownFn | 下方function | 空 | function(me){ //你的代码 me.resetload(); } |
API
暴露一些功能，可以让dropload更灵活的使用
lock() 锁定dropload
| 参数 | 说明 |
|---|---|
lock() |
智能锁定，锁定上一次加载的方向 |
lock('up') |
锁定上方 |
lock('down') |
锁定下方 |
unlock() 解锁dropload
noData() 无数据
| 参数 | 说明 |
|---|---|
noData() |
无数据 |
noData(true) |
无数据 |
noData(false) |
有数据 |
resetload() 重置。每次数据加载完，必须重置
完整实例
<!doctype html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<title>移动端下拉刷新、上拉加载更多插件 </title>
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<style>
*{
margin: 0;
padding:0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
}
html{
font-size:10px;
}
body{
background-color: #f5f5f5;
font-size: 1.2em;
}
.header{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #ccc;
background-color: #eee;
}
.header h1{
text-align: center;
font-size: 2rem;
font-weight: normal;
}
.content{
max-width: 640px;
margin: 0 auto;
background-color: #fff;
}
.content .item{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align:center;
-webkit-box-align:center;
box-align:center;
-webkit-align-items:center;
align-items:center;
padding:3.125%;
border-bottom: 1px solid #ddd;
color: #333;
text-decoration: none;
}
.content .item img{
display: block;
width: 40px;
height: 40px;
border:1px solid #ddd;
}
.content .item h3{
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
max-height: 40px;
overflow: hidden;
line-height: 20px;
margin: 0 10px;
font-size: 1.2rem;
}
.content .item .date{
display: block;
height: 20px;
line-height: 20px;
color: #999;
}
.opacity{
-webkit-animation: opacity 0.3s linear;
animation: opacity 0.3s linear;
}
@-webkit-keyframes opacity {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes opacity {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
</style>
<link rel="stylesheet" href="../dist/dropload.css">
</head>
<body>
<div class="header">
<h1>就当我是新闻页吧</h1>
</div>
<div class="content">
<div class="lists">
</div>
</div>
<!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
<script src="js/zepto.min.js"></script>
<script src="../dist/dropload.min.js"></script>
<script>
$(function(){
// 页数
var page = 0;
// 每页展示5个
var size = 5; // dropload
$('.content').dropload({
scrollArea : window,
threshold : 100,//提前加载距离
loadUpFn : function(me){
$.ajax({
type: 'GET',
url: 'http://ximan.github.io/dropload/examples/json/update.json',
dataType: 'json',
success: function(data){
var result = '';
for(var i = 0; i < data.lists.length; i++){
result += '<a class="item opacity" href="'+data.lists[i].link+'">'
+'<img src="'+data.lists[i].pic+'" alt="">'
+'<h3>'+data.lists[i].title+'</h3>'
+'<span class="date">'+data.lists[i].date+'</span>'
+'</a>';
}
// 为了测试，延迟1秒加载
setTimeout(function(){
$('.lists').html(result);
// 每次数据加载完，必须重置
me.resetload();
// 重置页数，重新获取loadDownFn的数据
page = 0;
// 解锁loadDownFn里锁定的情况
me.unlock();
me.noData(false);
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
},
loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
$.ajax({
type: 'GET',
url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
dataType: 'json',
success: function(data){
var arrLen = data.length;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
result += '<a class="item opacity" href="'+data[i].link+'">'
+'<img src="'+data[i].pic+'" alt="">'
+'<h3>'+data[i].title+'</h3>'
+'<span class="date">'+data[i].date+'</span>'
+'</a>';
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.lists').append(result);
// 每次数据插入，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
}
});
});
</script>
</body>
</html>
【Web】移动端下拉刷新、上拉加载更多插件的更多相关文章
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- juery下拉刷新，div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- Android如何定制一个下拉刷新，上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- vue2.0 移动端，下拉刷新，上拉加载更多插件，修改版
在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...
随机推荐
- GsonFormat的使用 (转)
一.Android Studio快速添加Gson 具体操作: 1.File->Project Structure: 2.app->Dependencies->&qu ...
- 以字符串形式获取excel单元格中的内容
public static String getCellValue(XSSFCell cell) { if (cell == null) { return ""; } switch ...
- 用两个栈实现队列(python)
题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. # -*- coding:utf-8 -*- class Solution: def __init__( ...
- DHCP server 冒充及DOS攻击处理方案
一.DHCP服务器在运维上存在的常见问题: 1. DHCP服务器冒充 在DHCP服务器和客户端之间没有认证机制,如果在DHCP server覆盖的网络上随意接入一个DHCP server,就有可能造成 ...
- CardView 卡片布局
转自:https://www.baidu.com/link?url=WwHvfX3PB_egfQ6GFwxsDeq4NDzB2AW-zaTzskkNXs0qWnIcHyh3pN3Oqe6YO1lAmV ...
- Unity5权威讲解+项目源码+MP4
扫码时备注或说明中留下邮箱 付款后如未回复请至https://shop135452397.taobao.com/ 联系店主
- 转 C++函数返回值，你必须注意的问题
归根结底,C++所面临的问题要求它提供各种各样的机制以保证性能,也许,这辈子也见不到C++能安全有效的自己进行内存垃圾回收..... 老程序猿都会提醒菜鸟,注意函数的返回值,因为,很可能,你的函数返回 ...
- c# 把对象加入队列，对象为全局变量，对象改变队列值也跟着改变
若程序把对象加入队列,对象为全局变量,对象改变队列值也跟着改变,如下: filecontent 为两个字段的属性值. class FileContent { // public string Htt ...
- 织梦文章里面的图片alt和title属性，用文章标题自动替换
把{dede:field.body/}改成{dede:field.body runphp=yes}global $dsql,$id,$aid;$myid = isset($id) ? $id : $a ...
- PAT 1006 换个格式输出整数 (15)（C++&JAVA&Python）
1006 换个格式输出整数 (15)(15 分) 让我们用字母B来表示"百".字母S表示"十",用"12...n"来表示个位数字n(& ...