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. ReactiveSwift源码解析(十) Lifetime代码实现

    为了之后博客的进行,本篇博客我们就来聊一下ReactiveSwift框架中的Lifetime类的具体实现.从Lifetime这个名字中我们就这道,就是生命周期.在ReactiveSwift中使用Lif ...

  2. MySQL中的基本知识

    本文是MySQL中的一些基本知识,包括各种基本操作.数据类型和表的约束等. ps:都是自己总结.手打出来的,虽然不是什么新东西,但也勉强算原创吧.. 一.数据库 1.创建:CREATE DATABAS ...

  3. java虚拟机详解

    注: 此篇文章可以算是读<深入理解Java虚拟机:JVM高级特性与最佳实践>一书后的笔记总结加上我个人的心得看法. 整体总结顺序沿用了书中顺序,但多处章节用自己的话或直白或扩展的进行了重新 ...

  4. angular或者js如何确定选中ul中的哪几个li

    刚来新公司接到新的需求做一个知识库页面 红色的是单选    蓝色的是多选     这些都是需要传递到后台的 开始不知道如何解决  下班后在家想到一个很巧妙的办法  不多说上代码 箭头所指就是在li里写 ...

  5. CgLib动态代理学习【Spring AOP基础之一】

    如果不了解JDK中proxy动态代理机制的可以先查看上篇文章的内容:Java动态代理学习[Spring AOP基础之一] 由于Java动态代理Proxy.newProxyInstance()的时候会发 ...

  6. localStorage与sessionStorage区别

    localStorage与sessionStorage区别:浏览器正常模式下:    关闭浏览器或该窗口标签时,localStorage数据依然保存,但是sessionStorage数据会被清除.   ...

  7. .NET并行计算和并发3-Invoke

    Control.Invoke 方法 (Delegate) 在拥有此控件的基础窗口句柄的线程上执行指定的委托. Invoke方法搜索沿控件的父级链,直到它找到的控件或窗口具有一个窗口句柄: 如果尚不存在 ...

  8. 多线程(五) java的线程锁

    在多线程中,每个线程的执行顺序,是无法预测不可控制的,那么在对数据进行读写的时候便存在由于读写顺序多乱而造成数据混乱错误的可能性.那么如何控制,每个线程对于数据的读写顺序呢?这里就涉及到线程锁. 什么 ...

  9. Dynamics CRM:Word Template Feature 的使用和实际遇到问题解决方案

    Word Template 是Dynamics CRM 2016 中的其中一个新的功能.Word Template 就是文档模板,用于在Dynamics CRM中定义文档模板,从而对实体记录按照文档模 ...

  10. Java微信公众平台开发之获取地理位置

    本部分需要用到微信的JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统 ...