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. 5. Leetcode 448. Find All Numbers Disappeared in an Array

    Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...

  2. 兔子与樱花[HEOI2015]

    题目描述 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个树枝连接,我们可以把它 ...

  3. 在drawRect:方法中绘制图片,文字以及Core Graphics 框架的了解

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...

  4. Python [目录]

    [第一篇] Python 发展历史 [第二篇] Python 优缺点 [第三篇] Python 应用场景 [第四篇] Python Hello World程序 [第五篇] Python 基础知识 [第 ...

  5. whatwg-fetch源码分析

    fetch 是什么 XMLHttpRequest的最新替代技术 fetch优点 接口更简单.简洁,更加语义化 基于promise,更加好的流程化控制,可以不断then把参数传递,外加 async/aw ...

  6. vue指令v-pre示例解析

    v-pre会跳过该元素及其子元素的编译过程,显示原始标签. <div id="app"> <span v-pre>{{msg}} 这句不会编译</sp ...

  7. 67. Add Binary【LeetCode】

    67. Add Binary Given two binary strings, return their sum (also a binary string). For example,a = &q ...

  8. 云端TensorFlow读取数据IO的高效方式

    低效的IO方式 最近通过观察PAI平台上TensoFlow用户的运行情况,发现大家在数据IO这方面还是有比较大的困惑,主要是因为很多同学没有很好的理解本地执行TensorFlow代码和分布式云端执行T ...

  9. HTML 基础学习笔记

    HTML 指超文本标记语言(Hyper Text Markup Language),一种标记语言,用来描述网页的一种语言. 一.HTML 基本结构示意图 1. HTML 标签 (HTML tag),由 ...

  10. 解决Visual Studio For Mac Restore失败的问题

    之前就了解到微软出了mac版的VS,没太多的关注,自己也就是使用 DotNet Core SDK + VS Code 做一些小demo. 前两天发布了DotNet Core 2.0 ,Visual S ...