移动端上拉下拉刷新组件

listloading.js

listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件，基础库可使用jquery.js或者zepto.js操做dom节点，目前我是使用了zepto.js做为基础库操做dom，以jquery插件的形式存在。若是不想以插件方式使用，则只须要把listloading直接移植你须要的库里面就ok啦。listloading主要针对移动端而生，在使用浏览器自带滚动，用户体验很不友好，与Android和ios差异甚远，因此选择iscroll.js，它实现方式是使用css3动画translate 2D 转换来实现滚动效果，transform属性使用硬件加速，性能方法获得很大提升。

 

npm安装

npm install -g listloading

　　

使用方法以下：

一、html结构

 

与iscroll建立的结构同样，可是指定的建立的元素节点必须指定ID，由于在组件里面发布订阅模式须要作一个标识。由于iscroll在节点元素建立以前，必须先设定高度，不然会致使没法滚动；iscroll建立完毕是指定给第一个子元素滚动，因此listloading的上拉和下拉刷新也是追加到第一个子元素里面，其实把第一个子元素想象成为html里面的body就能够了。

二、须要引入的js

<script src="../src/jslib/zepto.min.js"></script>
<script src="../src/jslib/iscroll.js"></script>
<script src="../build/listloading.js"></script>

三、调用

var m = 3, n = 0;

// 建立iscroll以前必需要先设置父元素的高度，不然没法拖动iscroll
$('#listloading').height($(window).height());

// 模板或者ajax请求方法
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;
}

// 选择器必须是ID 由于要用到发布订阅作标识
var listloading = $('#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){  //下拉刷新
        m = 3;
        n = 0;
        var __html = createHtml();
        $('#order-list').html(__html);
        // 执行完执行方法以后必须执行回调 回调的做用是通知默认加载已经所有执行完毕，程序须要去建立iscroll
        cb();
    },
    // iscroll的API 
    iscrollOptions: {
        //
    }
});
// 点击事件 由于iscroll阻止了冒泡，它也建议本身写点击方法，若是开启preventDefault为false这行就是解决onclick失效问题， 可是开启这个值在微信下面拖动会有问题  滑动结束以后触发不到scrollend，因此我本身内嵌了一个事件方法
listloading.evt('li', 'click', function (dom) {
    // dom.remove();
    // $('#order-list').append(createHtml());
    // listloading.refresh();
});

　　

效果图

 

四、API

4.1 下拉刷新

初始化会执行一次，主要是建立iscroll，以后每次下拉刷新结束以后执行，当在方法里面执行完毕你的程序以后须要执行一个回调函数，告知已经所有程序执行完毕，listloading就会自动去调用iscroll的刷新功能，回调不须要传参。

options.pullDownAction = function(cb){  //下拉刷新
    .....
    // 执行完执行方法以后必须执行回调
    cb();
}

　　

4.2 上拉刷新

每次上拉刷新结束以后执行，一样的在执行完你的程序以后须要执行一个回调函数，回调里面须要回调一个布尔值，若是为true则怎么已经所有加载完毕，就已经拉到底了。

options.pullUpAction = function(cb){  //下拉刷新
    .....
    // 执行完执行方法以后必须执行回调 true为下拉到底
    cb(true);
}

　　

4.3 销毁ListLoading

listloading.destroy();

4.4 刷新listloading

滚动区域节点有增删则须要在操做完毕以后调用此方法

listloading.refresh();

4.5 是否显示时间 默认值为false

true下拉显示时间，距离上次刷新的时间

options.disableTime = true

4.6 上拉刷新文字

options.upLoadmoretxt = '上拉刷新文字';  // 里面能够放html标签

4.7 下拉刷新文字

options.pullDrefreshtxt = '下拉刷新文字'; // 里面能够放html标签

4.8 正在加载中文字

options.loadertxt = '正在加载中文字'; // 里面能够放html标签

4.9 松开刷新文字

options.Realtimetxt = '松开刷新文字'; // 里面能够放html标签

4.10 已经所有加载完毕文字

options.loaderendtxt = '已经所有加载完毕文字'; // 里面能够放html标签

4.12 iscroll的配置

options.iscrollOptions = {};

 

github下载地址： https://github.com/gtdalp/listloading.git  若是以为还过得去请给个星吧O(∩_∩)O~

转发请注明地址： https://github.com/gtdalp/listloading.git