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

　　本例介绍一种简单使用的移动端下拉刷新、上拉加载更多插件，下载及参考地址：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. 【scrapy】爬虫的时候总在提示 KeyError: 'novelLabel'

    调试的时候总是提示 KeyError: 'novelLabel'然后决定断点调试一下, 在def parse_book_list(self, response):方法下,添加print(respons ...

  2. 并查集和树的一些性质 hdu1325

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1325 题意是每次输入一对数字n,m表示一条树边,并且n是m的父亲,直到n==0&&m= ...

  3. http://218.245.4.98:20000/phpmyadmin:2018SCTF--easiest web - phpmyadmin

      SCTF的web最简单题,好难好难好难.      直接进去就是PHPmyadmin界面(即mysql的网页界面),需要登录密码,这个我当时没有破解出来,谁知道账号密码是root/root咩,要是 ...

  4. jQuery禁止Ajax请求缓存

    一 现象 get请求在有些浏览器中会缓存.浏览器不会发送请求,而是使用上次请求获取到的结果. post请求不会缓存.每次都会发送请求. 二 解决 jQuery提供了禁止Ajax请求缓存的方法: $.a ...

  5. TZOJ 3711 浪漫自习(最大流)

    描述 如今的校园谈恋爱已是习以为常,这不,去上自习也要成双成对的.现在假设某班里有N对情侣从同一寝室楼出发,到达同一个教室上自习.途中,她们可能会经过长廊.静溪等一系列的景点观光游览.但情侣们不希望在 ...

  6. textarea 自动到右边就换行

    java 到最右边的时候自动换行如实例: textArea.setLineWrap(true);

  7. 【centos】centos安装配置samba

    因为我的centos为一台阿里云服务器,想和我本机(mac)进行文件共享.所以在我的阿里云上安装配置samba. 服务器环境:centos 7.3 本地环境:mac 第1步:首先查看是否已经安装过了s ...

  8. android抽屉效果

    所谓抽屉  是区别于侧滑菜单 他不会把内容区域挤掉  他只是覆盖在内容区域 下边一个布局文件  一个代码   可以说的就是布局文件就是 <android.support.v4.widget.Dr ...

  9. 各个JSON技术的比较（Jackson，Gson，Fastjson）的对比

    JSON技术的调研报告 一 .各个JSON技术的简介和优劣 1.json-lib json-lib最开始的也是应用最广泛的json解析工具,json-lib 不好的地方确实是依赖于很多第三方包, 包括 ...

  10. linux修改hosts

    vim /etc/hosts