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. ubuntu 手动安装openssh-server

    先用能上网的机器下载:zlib-1.2.5.tar.openssh-5.6p1.tar.gz.openssl-0.9.8o.tar.tar,接下来,准备安装. 步骤如下: 1.首先解压安装zlib:t ...

  2. [js高手之路]es6系列教程 - 解构详解

    解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法, es6之前,我们通过对象名称[键] 读取数据 var User = { 'name' : 'ghostwu', 'age' : ...

  3. HttpRequest 类

    关于此类的介绍:查看HttpRequest类 点击查看:HttpRequest中方法的封装 跟这个类对应的HttpResponse类 定义:使 ASP.NET 能够读取客户端在 Web 请求期间发送的 ...

  4. viewpager+layout布局文件随数据多少创建滑动页面

    近期在做一个答题类型的APP,而其中最重要的是答题卡.而答题卡要如何做? 1.将数据插入到SQLite数据库中 2.建立entity实体包,创建实体类,封装. 3.创建实体与view的List集合 4 ...

  5. Java Collection(转载)

    在 Java2中,有一套设计优良的接口和类组成了Java集合框架Collection,使程序员操作成批的数据或对象元素极为方便.这些接口和类有很多对 抽象数据类型操作的API,而这是我们常用的且在数据 ...

  6. NYOJ 23.取石子(一)

    取石子(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 一天,TT在寝室闲着无聊,和同寝的人玩起了取石子游戏,而由于条件有限,他/她们是用旺仔小馒头当作石子.游 ...

  7. TestNG的组测试和组中组测试

    在编写测试的过程中,我们经常遇到只想执行个别或者某一部分/某一类型的测试用例,这时我们可以使用TestNG的分组测试方法 分组测试在配置时,TestNG执行的原则是:只保留最小集合进行执行 看代码: ...

  8. 扩展Python模块系列(三)----参数解析与结果封装

    在上一节中,通过一个简单的例子介绍了C语言扩展Python内建模块的整体流程,从本节开始讲开始深入讨论一些细节问题,在细节讨论中从始至终都会涉及[引用计数]的问题.首先讨论C语言封装的Python函数 ...

  9. Android -- AsyncTask源码解析

    1,前段时间换工作的时候,关于AsyncTask源码这个点基本上大一点的公司都会问,所以今天就和大家一起来总结总结.本来早就想写这篇文章的,当时写<Android -- 从源码解析Handle+ ...

  10. 【社交系统研发日记五】ThinkSNS+如何计算字符显示长度?

    今天我们来聊一下可能很多人都会头疼的东西:显示长度. 需求是这样的,在字符的显示上,两个英文单词才占一个中文或者其他语言的显示长度.如下: 上面排的是两个英文字母,一个汉字,一个Emoji.你会发现, ...