Swiper+JS 上拉刷新
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 上拉刷新的更多相关文章
- js上拉刷新数据
$(window).scroll(function () { //下面这句主要是获取网页的总高度,主要是考虑兼容性所以把Ie支持的documentElement也写了,这个方法至少支持IE8 var ...
- iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
- iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- mui上拉刷新+下拉加载
具体操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- HBuilder/Mui开发ios使用上拉刷新导致滚动条无法使用的解决方法
HBuilder/Mui开发的APP使用上拉刷新,当滚动到底部是会触发上拉刷新,加载更多数据.但是ios上确是一个坑,导致滚动条无法滚动. 解决方法 放弃Mui的上拉刷新,自己使用JS实现. var ...
- 【UI组件】——用jQuery做一个上拉刷新
技术要点: 1.jQuery的插件写法 2.上拉刷新步骤分解 3.css样式 jQuery的插件写法: $.fn.pluginName = function() { return this.each( ...
- iScroll示例,下拉刷新,上拉刷新
iScroll示例,下拉刷新,上拉刷新 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- 移动端好用的下拉加载上拉刷新插件 dropload插件
入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...
随机推荐
- hdu2108 Shape of HDU 极角排序判断多边形
Problem Description 话说上回讲到海东集团推选老总的事情,最终的结果是XHD以微弱优势当选,从此以后,"徐队"的称呼逐渐被"徐总"所取代,海东 ...
- XRD 数据处理:使用 Origin 进行多谱图对比
如果一个实验制备了 4 种不同条件下的样品,并分别测得了它们的 XRD 衍射谱图,那么在数据处理中如何用 Origin 软件得到一张多谱图对比的图呢? 样品间的谱图对比 如果只是谱图样品间对比(以 4 ...
- Java 架构师之路(2)
一.技术 J2EE技术是架构师的基础.1.<Java编程思想> 初学Java时阅读这本书觉得好难,阅读第二遍时才觉得讲的很细致.这是一本不怕多读的好书. 2.<J2EE应用与BEA ...
- JavaScript中的EcMAScript学习笔记
一.Javascript概述(知道) a.一种基于对象和事件驱动的脚本语言 b.作用: 给页面添加动态效果 c.历史: 原名叫做livescript.W3c组织开发的标准叫ECMAs ...
- 扩展Python模块系列(三)----参数解析与结果封装
在上一节中,通过一个简单的例子介绍了C语言扩展Python内建模块的整体流程,从本节开始讲开始深入讨论一些细节问题,在细节讨论中从始至终都会涉及[引用计数]的问题.首先讨论C语言封装的Python函数 ...
- 如何解压 Mac OS X 下的 PKG 文件(网摘)
如何解压 Mac OS X 下的 PKG 文件 原文出处:[Macplay] 有时候我们可能需要解包 PKG 格式的安装文件包,在 OS X 系统下完成该操作并不需要你额外再安装软件,系统内置的命令就 ...
- python自动化运维四:nmap端口扫描
p { margin-bottom: 0.25cm; line-height: 120% } a:link { } 端口扫描器: Python的第三方模块python-nmap可以实现高效的端口扫描. ...
- ffmpeg音频播放代码示例-avcodec_decode_audio4
一.概述 最近在学习ffmpeg解码的内容,参考了官方的教程http://dranger.com/ffmpeg/tutorial03.html,结果发现这个音频解码的教程有点问题.参考了各种博客,并同 ...
- nodejs之express4x
学习node好榜样!前阵子看了php,那个模块化编译真的好棒.然而php学习起来不是一般的记不住,毕竟和js还是有不同的.于是转移到了node.看到熟悉的js脚本,心里踏实多了. 话不多讲,php我也 ...
- shell解析命令行的过程以及eval命令
本文说明的是一条linux命令在执行时大致要经过哪些过程?以及这些过程的大致顺序. 1.1 shell解析命令行 shell读取和执行命令时的大致操作过程如下图: 以执行以下命令为例: echo -e ...