下拉加載使用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方法。

今天遇到的一個需求默認是二手房的，觸底要加載更多。點擊租房，顯示租房的內容，觸底加載更多。

注意點：一、二手房和租房的下拉加載需分開寫。不然點擊tab切換後下拉加載的不執行。
　　　　二、頁面載入時二手房容器調用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()