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. hdu2108 Shape of HDU 极角排序判断多边形

    Problem Description 话说上回讲到海东集团推选老总的事情,最终的结果是XHD以微弱优势当选,从此以后,"徐队"的称呼逐渐被"徐总"所取代,海东 ...

  2. XRD 数据处理:使用 Origin 进行多谱图对比

    如果一个实验制备了 4 种不同条件下的样品,并分别测得了它们的 XRD 衍射谱图,那么在数据处理中如何用 Origin 软件得到一张多谱图对比的图呢? 样品间的谱图对比 如果只是谱图样品间对比(以 4 ...

  3. Java 架构师之路(2)

    一.技术 J2EE技术是架构师的基础.1.<Java编程思想> 初学Java时阅读这本书觉得好难,阅读第二遍时才觉得讲的很细致.这是一本不怕多读的好书. 2.<J2EE应用与BEA ...

  4. JavaScript中的EcMAScript学习笔记

    一.Javascript概述(知道)    a.一种基于对象和事件驱动的脚本语言    b.作用: 给页面添加动态效果    c.历史: 原名叫做livescript.W3c组织开发的标准叫ECMAs ...

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

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

  6. 如何解压 Mac OS X 下的 PKG 文件(网摘)

    如何解压 Mac OS X 下的 PKG 文件 原文出处:[Macplay] 有时候我们可能需要解包 PKG 格式的安装文件包,在 OS X 系统下完成该操作并不需要你额外再安装软件,系统内置的命令就 ...

  7. python自动化运维四:nmap端口扫描

    p { margin-bottom: 0.25cm; line-height: 120% } a:link { } 端口扫描器: Python的第三方模块python-nmap可以实现高效的端口扫描. ...

  8. ffmpeg音频播放代码示例-avcodec_decode_audio4

    一.概述 最近在学习ffmpeg解码的内容,参考了官方的教程http://dranger.com/ffmpeg/tutorial03.html,结果发现这个音频解码的教程有点问题.参考了各种博客,并同 ...

  9. nodejs之express4x

    学习node好榜样!前阵子看了php,那个模块化编译真的好棒.然而php学习起来不是一般的记不住,毕竟和js还是有不同的.于是转移到了node.看到熟悉的js脚本,心里踏实多了. 话不多讲,php我也 ...

  10. shell解析命令行的过程以及eval命令

    本文说明的是一条linux命令在执行时大致要经过哪些过程?以及这些过程的大致顺序. 1.1 shell解析命令行 shell读取和执行命令时的大致操作过程如下图: 以执行以下命令为例: echo -e ...