其他代码

移动端下拉刷新上拉加载更多jQuery插件

面包多

移动端下拉刷新上拉加载更多jQuery插件-创客云
dropload.js 是一款 jQuery 移动端下拉刷新、上拉加载更多插件。dropload.js 可以依赖于 jquery 或 Zepto,实现移动端常见的下拉刷新和上拉加载更多功能。

使用方法

在页面中引入下面的文件。

也想出现在这里?联系我们
WordPress 主题
  1. <link rel="stylesheet" href="../dist/dropload.css">
  2. <script src="js/jquery.min.js" type="text/javascript"></script>
  3. <script src="../dist/dropload.min.js"></script>

HTML 结构

  1. <div class="content">
  2.     <div class="lists"></div>
  3. </div>

下拉刷新

  1. var page = 0;// 页数
  2. var size = 5;// 每页展示5个
  3. $('.content').dropload({
  4.     scrollArea : window,
  5.     loadDownFn : function(me){
  6.         page++;
  7.         // 拼接HTML
  8.         var result = '';
  9.         $.ajax({
  10.             type: 'GET',
  11.             url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
  12.             dataType: 'json',
  13.             success: function(data){
  14.                 var arrLen = data.length;
  15.                 if(arrLen > 0){
  16.                     for(var i=0; i<arrLen; i++){
  17.                         result +=   data[i].title;
  18.                     }
  19.                 // 如果没有数据
  20.                 }else{
  21.                     me.lock();  // 锁定
  22.                     me.noData();    // 无数据
  23.                 }
  24.                 // 为了测试,延迟1秒加载
  25.                 setTimeout(function(){
  26.                     $('.lists').append(result); // 插入数据到页面,放到最后面
  27.                     me.resetload(); // 每次数据插入,必须重置
  28.                 },1000);
  29.             },
  30.             error: function(xhr, type){
  31.                 alert('Ajax error!');
  32.                 me.resetload(); // 即使加载出错,也得重置
  33.             }
  34.         });
  35.     }
  36. });

上拉加载将 loadUpFn 换成 loadDownFn 即可。

配置参数

参数 说明 默认值 可填值
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

lock() 锁定 dropload

  • lock():智能锁定,锁定上一次加载的方向
  • lock('up'):锁定上方
  • lock('down'):锁定下方

noData() 无数据

  • noData():无数据
  • noData(false):无数据
  • noData(true):有数据

resetload() 重置。每次数据加载完,必须重置。

由于部分 Android 中 UC 和 QQ 浏览器头部有地址栏,并且一开始滑动页面隐藏地址栏时,无法触发 scroll 和 resize,所以会导致部分情况无法使用。解决方案 1:增加 distance 距离,例如 DEMO2 中 distance:50;解决方案 2:加 meta 使之全屏显示:

  1. <meta name="full-screen" content="yes">
  2. <meta name="x5-fullscreen" content="true">

Github 网址:https://github.com/ximan/dropload

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!