移动网站中常常有的功能：列表的下拉刷新、上拉加载更多

　　本例介绍一种简单使用的移动端下拉刷新、上拉加载更多插件，下载及参考地址：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】移动端下拉刷新、上拉加载更多插件的更多相关文章

  1. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  2. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  3. juery下拉刷新，div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  4. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  5. Android如何定制一个下拉刷新，上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  6. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  7. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  8. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  9. vue2.0 移动端，下拉刷新，上拉加载更多插件，修改版

    在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...

随机推荐

  1. Idea设置类注释模板

    1.选择File–>Settings–>Editor–>File and Code Templates–>Includes–>File Header. 在Descript ...

  2. Openstack 集群，及常用服务的 高可用 haproxy配置

    一.介绍 配置文件位置(yum 安装):/etc/haproxy/haproxy.cfg 全局配置 #------------------------------------------------- ...

  3. CUDA 编程的基本模式

    reproduced from: http://www.cnblogs.com/muchen/p/6306747.html 前言 本文将介绍 CUDA 编程的基本模式,所有 CUDA 程序都基于此模式 ...

  4. 【mybatis基础】mybatis开发dao两种方法

    mybatis是一个支持普通SQL查询,存储过程和高级映射的优秀的持久层的框架,是apache下的顶级项目.mybatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.mybat ...

  5. 微信小程序接入百度统计

    一. 百度统计添加应用,获取appkey和微信小程序统计sdk: 1. 百度统计首页,点击“我的全部应用”右侧的添加按钮: 2. “应用类型”选择小程序统计,选择微信小程序,填写应用名称信息,选择内容 ...

  6. stark组件之过滤操作【模仿Django的admin】

    一.先看下django的admin是如何实现过滤操作 首先在配置类中顶一个list_filter的列表,把要过滤的字段作为元素写i进去就可以了 class testbook(admin.ModelAd ...

  7. linux虚拟机ping不通主机和外网（包括刚装系统遇到的一些问题）

    自己ubuntu系统安装了一个virtualBox虚拟机,里面又装了一个ubuntu-server系统: 1.先设置一下字符集,因为一开始装系统的时候选择的是中文,但里面始终无法支持中文,那就算了,反 ...

  8. 28- foreach里面实现一次遍历两个链表

    由于业务需求,要在一个foreach里面实现一次遍历两个链表:后台传来的是连个list:  分别是 <c:set var = "i" value = "0" ...

  9. Socket（转自 阿里云）

    摘要:Socket-C/S Socket又称"套接字",应用程序 通常通过"套接字"向网络发出请求或者应答网络请求,使主机间或者一台计算机上的进程间可以通讯. ...

  10. mysql数据库存储经度纬度

    使用float或者double会自动四舍五入,用decimal(20,17)当然你用varchar也是可以的