template-web.js 结合dropload.min.js下拉插件实现下拉刷新和上拉加载

  //引入js,所需要的js已经上传到个人资源
  <script type="text/javascript" src="/web/home/js/template-web.js"></script>
  <link href="/web/home/css/dropload.css" rel="stylesheet" type="text/css">   
  <script  type="text/javascript" src="/web/home/js/dropload.min.js"></script>
  <script type="text/javascript" src="/web/home/js/basic.js"></script>

  <div class="tit_zj">中奖记录<span>(仅显示7天记录）</span></div>
  <div class="wrap_p">
  </div>  
    <div class="zj_list">
        <ul>

               
        </ul>
        <div class="clear"></div>
        </div>

      
  </div>
</div>
    <form id="queryForm">
    <input type="hidden" name="pageNumber" value="1"> //当前页
    <input type="hidden" name="pageSize" value="20"> //每页显示数量
    </form>
</body>

  <script id="jsUserListTempl" type="text/html">
        {{each data.list  jsUser i}}
              <li>
                <div class="t_R"> <span class="tel">{{jsUser.Tel}}</span> <span class="u_name">{{jsUser.WinName}}</span> </div>
                <div class="t_L">
                   <span class="date">{{jsUser.WinTime }}</span>
                   <span class="txt">
                     <span class="j_name">{{jsUser.GoodsName}}</span>
                     {{if jsUser.Status==1}}
                     <span class="tip_gray">已兑奖</span>
                     {{else}}
                     <span class="tip_org">未兑奖</span>
                     {{/if}}
                   </span>
                </div>
              </li>
        {{/each}}
</script>

<script type="text/javascript" >

$(function(){

    var $queryForm = $('#queryForm');
    var $pageNumber = $queryForm.find('input[name="pageNumber"]');
        $pageNumber.val(1);
     var $jsuser_list_wrap_lists=$('.zj_list ul');
    var dropload = $('.shzx_box').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">没有更多</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">没有更多</div>'
        },//下拉刷新
        loadUpFn : function(me){
                        $pageNumber.val(1);
                        $.getApi("/web/home/getlotterydata",$queryForm.serialize(), function(result){
                      console.log(result);
                     if(result.code !== 1){
                        $.alert(result.message, "提示");
                        // 每次数据加载完，必须重置
                        me.resetload();
                        return;
                    }
                    if(result.data.totalRow==0){
                        //显示无数据
                        me.noData();
                        me.resetload();
                        return;
                    }else{
                        me.noData(false);
                    }
                    $jsuser_list_wrap_lists.html(template('jsUserListTempl',result));
                        // 每次数据加载完，必须重置
                        me.resetload();
                        me.unlock();
                    if(result.data.list.length == 0){
                       me.noData();
                    } else {
                        me.noData(false);
                        $pageNumber.val(parseInt($pageNumber.val())+1);
                    }
                    $.initLazyLoad();
                }, "json");
        },
        loadDownFn : function(me){
               
                    $.getApi("/web/home/getlotterydata",$queryForm.serialize(),function(result){
                    //console.log(result);
                    if(result.code !== 1){
                        window.alert(result.message, "提示");
                        me.noData();
                        // 每次数据加载完，必须重置
                        me.resetload();
                        return ;    
                    }
                    if(result.data.totalRow==0){
                        me.noData();
                        me.resetload();
                        return;
                    }else{
                        me.noData(false);
                    }
                    $jsuser_list_wrap_lists.append(template('jsUserListTempl',result));
                    if(result.data.pageNumber >= result.data.totalPage){
                              me.lock();
                              me.noData();
                    }
                    // 每次数据加载完，必须重置
                    me.resetload();
                    $pageNumber.val(parseInt($pageNumber.val())+1);
                    $.initLazyLoad();
                }, "json");
        },
        threshold : 50
    });
 
});

</script>

请求数据如下 

效果如下