移动端dropload插件的使用

2019独角兽企业重金招聘Python工程师标准>>>

引入

dropload.css

dropload.min.js

1、只对一个区块进行下拉刷新的操作

<div id="wrapper" style="padding-bottom: 4rem;">
   <div id="content">


   </div>
</div>

js内容:

$(function() {
   // 页数
   var page = 0;
   // 每页展示10个
   var size = 10;

   // dropload
   $('#wrapper').dropload({
      scrollArea: window,
      domUp: {
         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) {
         if (consultationid == 0) {
            return false;//发送ajax请求的条件不存在
         }
         getContent(2);//处理业务逻辑
         setTimeout(function () {
            // 每次数据加载完，必须重置
            me.resetload();
         }, 350);

      },
//        threshold : 50
   });

   
   }
});

function getContent(type){
   if(consultationid == 0 || confirm_flag) {
      return false;
   }
   confirm_flag = true;
   var url = '/user/consultation/getContent';
   $.post(url,{consultationid:consultationid,doctorid:doctorid,last_time:last_time,new_time:new_time,type:type},function(data){
      if(data.errcode == 0){
         var msg_data = data.data
         var length = msg_data.length;
         var html = '';
         var user_img_show = '<div class="historywenzi"><img src="'+user_img+'" οnerrοr="nofind();" /></div>';
         var doctor_img_show = '<div class="historywenzi"><img src="'+doctor_img+'" οnerrοr="nofind();" /></div>';
         if(length>0){
            for(var i=0;i<length;i++){
               if(msg_data[i].show_time == 1){
                  html += '<div class="time">'+msg_data[i].msg_time.substr(5,11)+'</div>';
               }
               switch(msg_data[i].msg_type){
                  case '1':
                     if(msg_data[i].msg_from == 1){
                        html += '<div class="history historyone">'+user_img_show;
                     }else if(msg_data[i].msg_from == 2){
                        html += '<div class="history">'+doctor_img_show;
                     }
                     html += '<span>'+msg_data[i].msg_content+'</span></div>';
                     break;
                  case '2':
                     if(msg_data[i].msg_from == 1){
                        html += '<div class="history historyone">+user_img_show';
                     }else if(msg_data[i].msg_from == 2){
                        html += '<div class="history">+doctor_img_show';
                     }
                     html += '<span><img src="'+msg_data[i].msg_content+'"/></span></div>';
                     break;
               }
            }
            if(type == 1){
               $('#content').append(html);
               new_time = msg_data[length-1].msg_time;
               if(last_time == 0){
                  last_time = msg_data[0].msg_time;
               }
            }else if(type == 2){
               $('#content').prepend(html);
               last_time = msg_data[0].msg_time;
            }
         }
      }
      confirm_flag = false;
   })
}

2、多个区别进行下拉刷新

var page_num = new Array(10);
page_num[1] = 0;
page_num[2] = 0;
page_num[3] = 0;
page_num[5] = 0;
page_num[6] = 0;
page_num[7] = 0;
page_num[8] = 0;
page_num[9] = 0;
page_num[11] = 0;
page_num[12] = 0;
var flag = new Array(10);
flag[1] = false;
flag[2] = false;
flag[3] = false;
flag[5] = false;
flag[6] = false;
flag[7] = false;
flag[8] = false;
flag[9] = false;
flag[11] = false;
flag[12] = false;

$(function(){


   $(".press").show().siblings('.schedule').hide();
   // dropload
   var dropload = $('.history').dropload({
      scrollArea : window,
      autoLoad : true,
      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>'
      },
      loadDownFn : function(me){
         getHistoryRecord();
         if(flag[up_type] == true){
            me.lock();
            me.noData();
         }
         setTimeout(function(){
            // 每次数据加载完，必须重置
            me.resetload();
         },400);
      },
      error:function(xhr,type) {
         console.log('error');
         me.resetload();
      }
   });

   $('.health ul li').on('click',function() {
      var type = $(this).attr('type');
      if(userid == '' || type == up_type) {
         return false;
      }
      up_type = type;
      //showChart();
      $(".schedule[type="+up_type+"]").show().siblings('.schedule').hide();
      if(up_type == 11) {
         $('.chart').hide();
      }else {
         $("#main" + up_type).show().siblings('.chart').hide();
      }
      if(!flag[up_type]) {
         dropload.unlock();
         dropload.noData(false);
      }else {
         dropload.lock('down');
         dropload.noData();
      }
      dropload.resetload();
      getHistoryRecord();

   });

});
function getHistoryRecord(){
      if(confirm_flag) {
         return false;
      }
   if(up_type == 0) {
      up_type = 1;
   }
   var url = '/user/health/showHistory';
      confirm_flag = true;
   $.post(url,{type:up_type,userid:userid,page_num:page_num[up_type]},function(data){
         confirm_flag = false;
      if(data.errcode != 0){
         flag[up_type] = true;
      }else{
         var historyRecord = data.data;
         $(".schedule[type="+up_type+"] tbody").append(historyRecord);
         if(data.noData){
            flag[up_type] = true;
         }
         page_num[up_type] = page_num[up_type]+1;
      }

   });

}

转载于:https://my.oschina.net/u/2618337/blog/861281