dropload插件--下拉刷新 上拉加载更多

依赖

基于Zepto 或者 jQuery 1.7以上版本，推荐jQuery 2.x版本（二者不要同时引用）

功能

主要实现下拉刷新和上拉加载更多功能
github地址/下载地址

实践结果

$('.content').dropload({
    scrollArea : window,
    //下拉刷新功能
    loadUpFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'json/more.json',
            dataType: 'json',
            success: function(data){
                alert(data);
                $('.list').html(data); 
                // 每次数据加载完，必须重置
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                // 即使加载出错，也得重置
                me.resetload();
            }
        });
    }
});

注：使用dropload做下拉刷新时，dropload绑定的元素div.content需要跟包裹被刷新元素的元素div.list有层级关系,不能是同一级别的

<div class="content">
  <!--下拉刷新出现的位置start-->
  <!--下拉刷新出现的位置end-->
    <div class="lists"></div>
    <div class="lists"></div>
    <div class="dropload-down">
        <div class="dropload-refresh">↑上拉加载更多</div>
    </div>
</div>

自己在实际项目中，用到了下拉刷新功能，有一个模块下拉刷新始终只能执行一次，之后都不起作用，但是其他用了相同插件的模块都是正常运行，排查半天，发现这个模块的元素层级不一样（dropload绑定的元素跟包裹被刷新元素的元素是同一个元素div.content），修改了层级之后（添加元素），下拉刷新正常，附上源码

  <!--修改之前的代码-->
  <!--
  <div id="friend_print_list"  class="friend_print_list weui-cells bg_gray weui-pull-to-refresh infinite">
      <%= render :partial => 'web/main/share_list_wrapper' %>
  </div>
  -->

  <!--修改之后的代码-->
  <!--添加div#refresh_wrapper元素，使用dropload做下拉刷新时，dropload绑定的元素需要跟包裹被刷新元素的元素有层级关系 不能是同一级别的-->
  <div id="refresh_wrapper">
    <div id="friend_print_list" class="friend_print_list friend_print_record weui-cells bg_gray weui-pull-to-refresh infinite" >
      <%= render :partial => 'web/main/share_list_wrapper' %>
    </div>
  </div>

// 下拉刷新js
//修改之前的代码
//$('#friend_print_list').dropload({
//修改之后的代码
$('#refresh_wrapper').dropload({
    scrollArea: window,
    domUp: {
        domClass: 'dropload-up',
        domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
        domUpdate: '<div class="dropload-update">↑释放更新</div>',
        domLoad: '<div class="dropload-load">加载中...</div>'
    },
    loadUpFn: function (me) {
        var url = '/web/main/refresh_list';
        $.ajax({
            type: 'GET',
            url: url,
            success: function (data) {
                setTimeout(function(){
                    $("#friend_print_list").html(data);
                    me.resetload(); // 每次数据加载完，必须重置
                    $('.weui-cell_swiped').swipeout(); //针对左滑显示删除操作功能 js加载的记录需要初始化

                },1000);
            },
            error: function (xhr, type) {
                me.resetload();// 即使加载出错，也得重置
            }
        });
    }
});