JQuery移动端页面上拉下拉加载更多内容插件listloading.js

简介

listloading 是一款移动端的页面上拉、下拉加载更多的组件，主要依赖于 iscroll.js v5.1.2 基础上开发的组件，基础库可以使用 jquery.js 或者 zepto.js 操作 dom 节点。如果不想以插件方式使用，则只需要把 listloading 直接移植你需要的库里面就可以 啦。listloading 主要针对移动端而生，在使用浏览器自带滚动，用户体验很不友好，所以选择 iscroll.js，它实现方式是使用 css3 动画 translate 2D 转换来实现滚动效果，transform 属性使用硬件加速，性能方法得到很大提高。

使用

1.  引用文件

<script src="jquery.min.js"></script> 
<script src="iscroll.js"></script> 
<script src="listloading.min.js"></script>

2.  HTML

<div id="listloading">
  <div>
    <ul id="order-list"></ul>
  </div>
</div>

3.  调用

var Listloading = require('listloading');
var m = 3;
var n = 0;
var hei = $(window).height();
// 创建iscroll之前必须要先设置父元素的高度，否则无法拖动iscroll
$('#listloading, .listloadingClass').height(hei);
// 模板
var createHtml = function(){
  var __html = '';
  for(var i = 0; i < 15; i++){
    var now = new Date().getTime();
    now = new Date(now + i*1000000);
    __html += '<li><span class="icon"></span><p class="title"><time class="r">'
           + now.getHours() + ':' + now.getMinutes() + ':'
           + now.getSeconds() + '</time>listloading' + (n++) + '</p><p class="text">移动端上拉下拉刷新组件...</li>';
  }
  return __html;
}
// demo
var listloading = new Listloading('#listloading', {
  disableTime: true,
  // 是否需要显示时间
  pullUpAction : function(cb){
    // 上拉加载更多
    m--;
    var flg = false;
    var __html = createHtml();
    if(m < 1){
      flg = true;
    } else {
      $('#order-list').append(__html);
    }
    // 数据加载完毕需要返回 end为true则为全部数据加载完毕
    cb(flg);
  },
  pullDownAction : function(cb){
    // 下拉刷新
    // true则为默认加载 false为下拉刷新
    if (flg) {
      console.log('默认加载');
    }
    m = 3;
    var __html = createHtml();
    $('#order-list').html(__html);
    // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕，程序需要去创建iscroll或者做下拉刷新动作
    cb();
  },
  // iscroll的API
  iscrollOptions: {        //    }
});

// 点击事件
listloading.evt('li', 'click', function (dom) {
  dom.remove();    
  // $('#order-list').append(createHtml());
  listloading.refresh();
});

相关链接

GitHub 地址 ：https://github.com/topics/listloading

Gitee 地址 ：https://gitee.com/mirrors/listloading#https://gitee.com/link?target=https%3A%2F%2Fgtdalp.github.io%2Fwidget%2Flistloading%2Fdemos%2Flistloading.html