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

　　本例介绍一种简单使用的移动端下拉刷新、上拉加载更多插件，下载及参考地址：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. css中background-size的属性值

    length 设置背景图像的高度和宽度. 第一个值设置宽度,第二个值设置高度. 如果只设置一个值,则第二个值会被设置为 "auto". percentage 以父元素的百分比来设置 ...

  2. Failed to start LSB: Bring up/down networking 问题

    Failed to start LSB: Bring up/down networking 问题   1.执行 service network restart 出现以下错误 Restarting ne ...

  3. 第十章 优先级队列 (b1)完全二叉堆：结构

  4. angular小技巧随笔

    1. 重新刷新页面 同页面切换状态: $state.go('tab.index', {inviteId:inviteId}); self.location.reload();

  5. 关于viewport我自己的理解

    其实即使不在html中添加meta viewport标签,每个移动端浏览器都会有一个默认的viewport,只是这个viewport的宽度是980,然后做1:3或者1:2的自动缩放.所以当不在html ...

  6. [leetcode]123. Best Time to Buy and Sell Stock III 最佳炒股时机之三

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  7. mysql中的 随机字符串的生成

    方法1. SELECT SUBSTRING(MD5(RAND()),FLOOR(RAND()*26)+1,6) AS rand_str; 上诉示例产生的是:6位长度的随机字符串. 函数解释: rand ...

  8. Tomcat端口的改变和编码的设置

    1.更改默认的端口: 在默认情况下,tomcat的端口是8080,如果出现8080端口号冲突,用如下方法可以修改Tomcat的端口号: 首先: 在Tomcat的根(安装)目录下,有一个conf文件夹, ...

  9. JFinal Model判断数据库某条记录的属性字段是否包含空值

    如果做报表,一条记录中有空值,使用FreeMarker渲染word会报错,并把错误日志输出到Word中.所以需要之前判断下当前记录中属性值是否有空值. package com.huijiasoft.u ...

  10. 10.31JS日记

    this问题 (1)this是js的一个关键字,指定一个对象,然后替代this: 函数中的this指向行为发生的主体,函数外的this都指向window,没有意义 (2)函数内的this跟函数在什么环 ...