文档章节

移动端dropload插件的使用

十月初五的月亮
 十月初五的月亮
发布于 2017/03/17 13:24
字数 606
阅读 446
收藏 0

引入

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+'" onerror="nofind();" /></div>';
         var doctor_img_show = '<div class="historywenzi"><img src="'+doctor_img+'" onerror="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;
      }

   });

}

© 著作权归作者所有

上一篇: google扩展工具
下一篇: php正则笔记
十月初五的月亮

十月初五的月亮

粉丝 0
博文 71
码字总数 31441
作品 0
朝阳
私信 提问
周报

1 周一到周三因事情请假 2 移动端认领申请、品牌型号选择、订单详情、上传图片等(移动端认领选择品牌和选择型号调整修改,认领上传图片保存路径修改) 100% 3 主页各处理任务数量(主页待关...

liubin92
2018/08/17
0
0
五年 Web 开发者 star 的 github 整理说明

欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:樊东东 前端从业几年,积累了不少github开源库。 有时候想查阅以前star的库,但不好找,github大多库都是英文说明,对中...

2017/12/18
0
0
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
2017/04/20
0
0
移动端动效平台--finger-mover

finger-mover 概述 是一个集成 Fingerd(移动端以手指为单位的事件管理方案) 和 Moved(微型运动方案) 为一体的移动端动效平台, 本身并不能为你做什么,但是附带的提供了很多插件,例如: 纵向...

HcySunYang
2017/05/16
561
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
8分钟前
0
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
10分钟前
1
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
6
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
4
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部