下拉加载使用dropload使用笔记

一般情况下载页面载入时调用dropload就可以正常使用。

$(function () {
  // // 页数
  var page = 1;
  // dropload
  $('.showlist__box').dropload({
    scrollArea: window,
    loadDownFn: function (me) {
      page++;
      $.ajax({
        type: 'GET',
        dataType: "json",
        url:'、-i2' + page + '-j220',
        success: function (data) {
          var data = data['restful_inter_getnewhouse_response'];
          if (data) {
            data.list.forEach(function (v) {

              if(v.houseSpecial){
                v.houseSpecial=JSON.parse(v.houseSpecial)
              }
              viewModel.oDataList.push(v)
            })
            // 每次数据插入，必须重置
            me.resetload();
          } else {
            // 锁定
            me.lock();
            // 无数据
            me.noData();
            me.resetload();
          }
        },
        error: function (xhr, type) {
          // alert('Ajax error!');
          // 即使加载出错，也得重置
          me.resetload();
        }
      });
    }
  });
});

注意每次触底加载，无论顺利或失败都应调用resetload方法。

今天遇到的一个需求默认是二手房的，触底要加载更多。点击租房，显示租房的内容，触底加载更多。

注意点：1、二手房和租房的下拉加载需分开写。否则点击tab切换后下拉加载的不执行。
　　　　2、页面载入时二手房容器调用dropload方法。第一次点击租房tab时调用租房容器的dropload方法。

代码实现如下：

var agentdetail={
    housetype:2,
    url:'',
    oldPage:1,
    rentPage:0,
    elDom:null,
    tabClick:0,
    init:function(){
        agentdetail.tab()
        agentdetail.dropload("oldhouse")
    },
    tab:function(){
        $(".agentdetail-houses-tab .tab-item").click(function(){
            $(this).addClass("cur").siblings().removeClass("cur")
            if($(this).index()){
                agentdetail.housetype=1
                agentdetail.tabClick++
                $(".showlist__box.renthouse").css("height","auto")
                $(".showlist__box.oldhouse").css("height","0px")
            }else{
                agentdetail.housetype=2
                $(".showlist__box.renthouse").css("height","0px")
                $(".showlist__box.oldhouse").css("height","auto")

            }
            //租房下拉加载初始化(只能初始化一次，否则出现多个加载提示)
            if(agentdetail.tabClick===1&&agentdetail.housetype===1){
                agentdetail.dropload("renthouse")    
            }

        })
    },
    dropload:function(type){
      $('.showlist__box.'+type).dropload({
        scrollArea: window,
        loadDownFn: function (me) {
　　　　　　if(agentdetail.housetype==1){
             agentdetail.rentPage++
             agentdetail.url=config.mcommon+'?method=homeapi.restful.inter.getAgentDetail&id='+$("#userid").val()+'&currentPage='+agentdetail.rentPage+'&rowsPerPage=5&type=1'
            }else{
             agentdetail.oldPage++
             agentdetail.url=config.mcommon+'?method=homeapi.restful.inter.getAgentDetail&id='+$("#userid").val()+'&currentPage='+agentdetail.oldPage+'&rowsPerPage=5&type=2'
            }
          $.ajax({
            type: 'GET',
            dataType: "json",
            url: agentdetail.url,
            success: function (data) {
              var data = data['restful_inter_getAgentDetail_response'];
              if (data.data.length) {
                data.data.forEach(function (v) {
                  //...数据处理                
                })
                // 每次数据插入，必须重置
                me.resetload();
              } else {
                // 锁定
                me.lock();
                // 无数据
                me.noData();
                me.resetload();
              }
            },
            error: function (xhr, type) {
              // alert('Ajax error!');
              // 即使加载出错，也得重置
              me.resetload();
            }
          });
        },
        domDown:{domNoData:'<div class="dropload-noData">到底了呦~</div>'},
        distance:50
      });    
    }
}
agentdetail.init()