JS

// 上拉刷新
            
            var page = 2;
            var isAjax = true;//加载数据前状态
            $("#dataTable,#AuditthroughDt,#AuditrejectedDt,#CancelDt,#CancelDtA,#UnauditedDt").scroll(function () {
               var viewH = $(this).height();//滚动区域可视区域
                var contentH = $(this).get(0).scrollHeight;//滚动区域内容实际高度
                var scrollTop = $(this).scrollTop();//滚动条高度
                var freshH = contentH - viewH - scrollTop;
                var timer;
               
          
                if (isAjax && freshH == 0) {
                    if (finished == false) {
                        isAjax = false;//加载数据中状态
                        $('.dropload-down').css('display', 'block');                
                                                
                            AjaxOrderList(page, orderState);
                            page++;
                            $('.dropload-down').css('display', 'none');
                            $(dom).scrollTop(contentH);
                            isAjax = true;//数据加载完后,重新赋值为初始状态
                                    
                    }

                }
            });

html:

<div class="content">
            <div class="swiper-container" id="swiper-container1">
                <div class="swiper-wrapper" id="orderState">
                    <div class="swiper-slide hascolor" title="-1">全部订单</div>
                    <div class="swiper-slide" title="1">已审核</div>
                    <div class="swiper-slide" title="2">审核驳回</div>
                    <div class="swiper-slide" title="3" >订单取消</div>
                    <div class="swiper-slide" title="4">取消申请中</div>
                    <div class="swiper-slide" title="5">待审核</div>
                </div>
            </div>

<div class="swiper-slide">
                        <div id="AuditthroughDt" data-type="1" class="allOrder  yscroll">

                            <div id="AuditDiv">
                                  <ul id="AuditDiv1"></ul>
                            </div>
                      
                        <div class="dropload-down" style="display:block;">
                                <div class="dropload-load">
                                    <span class="loading"></span>加载中...
                                </div>
                          </div>

                                                      
                        </div>
 </div>

许多类此的DIV

Swiper+JS 上拉刷新的更多相关文章

  1. js上拉刷新数据

    $(window).scroll(function () { //下面这句主要是获取网页的总高度,主要是考虑兼容性所以把Ie支持的documentElement也写了,这个方法至少支持IE8 var ...

  2. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  3. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  4. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. mui上拉刷新+下拉加载

    具体操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  6. HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法

    HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法 放弃Mui的上拉刷新,自己使用JS实现. var ...

  7. 【UI组件】——用jQuery做一个上拉刷新

    技术要点: 1.jQuery的插件写法 2.上拉刷新步骤分解 3.css样式 jQuery的插件写法: $.fn.pluginName = function() { return this.each( ...

  8. iScroll示例,下拉刷新,上拉刷新

    iScroll示例,下拉刷新,上拉刷新 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  9. 移动端好用的下拉加载上拉刷新插件 dropload插件

    入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...

随机推荐

  1. Django 1.9 admin 使用suit 小记

    最近项目做到了后台管理的部分.Django虽然提供了后台管理,但是界面不咋好看.所以我使用了suit.官网http://djangosuit.com/ 步骤: 1,安装suit 项目settings. ...

  2. Modelsimse10.1如何编译altera库文件以支持IP仿真

    前言 se版本默认没有ip之类的库支持,如果你用到了pll之类的ip,仿真前就得把库编译好. 流程 本例用的是altera的verilog库. 1.首先在modelsim安装目录下新建altera文件 ...

  3. 在Android中使用枚举注解而不是枚举

    Enums often require more than twice as much memory as static constants. You should strictly avoid us ...

  4. python 如何在一个for循环中遍历两个列表

    是我在看<笨方法学python>过程中发现有一行代码看不懂--" for sentence in snippet, phrase:",所以研究了半天,感觉挺有收获的.所 ...

  5. node.js之require

    1.require.resolve('./testModeule.js')在REPL运行环境下输入,可以查询到当前目录下textModeule.js模块文件的完整文件名 2.require.cache ...

  6. Oracle - 简单理解字符集

    起因 今天使用SoapUI来模拟第三方的程序进行测试. 简单来说,流程是我们的程序从SoapUI里面获取数据,然后将数据插入数据库从数据库. SoapUI的脚本来自于第三方,里面包含当地的字符编码,当 ...

  7. 利用OpenCms9提供的模块创建新站点

    OpenCms 9中提供b一个Demo,Demo使用了alkacon的bootstrap模板.如果已经安装了OpenCms 9,可以登陆http://localhost:8080/opencms/op ...

  8. Windows界面设计标准

    Windows界面设计标准..- Windows界面设计标准 Windows 界面设计标准 1. 易用性 界面元素的名称.标签应该易懂,用词准确,避免使用模楞两可的字眼,要与同一界面上的其他元素易于区 ...

  9. javaweb中的关于编码问题总结

    1.pageEncoding="utf-8" 设置JSP编译成Servlet时使用的编码 2.Contenttype="text/html;charset=utf-8&q ...

  10. Android事件传递机制详解及最新源码分析——View篇

    摘要: 版权声明:本文出自汪磊的博客,转载请务必注明出处. 对于安卓事件传递机制相信绝大部分开发者都听说过或者了解过,也是面试中最常问的问题之一.但是真正能从源码角度理解具体事件传递流程的相信并不多, ...