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 ...
随机推荐
- 15. leetcode 349. Intersection of Two Arrays
Given two arrays, write a function to compute their intersection. Example: Given nums1 = [1, 2, 2, 1 ...
- 第二棵树:Splay
Splay这东西神难打--什么都没动板子敲上就直逼200行了,而且非常难记(仿佛是模板长的必然结果).但是为什么还要学呢?据说是因为它可以实现区间操作.但是自从我得知无旋Treap也能做到这些,默默对 ...
- 5.npm scripts 使用指南
简单介绍 scripts里面的 "start": "node app" npm run start 相当于 node app { "name" ...
- [Usaco2007 Open]Fliptile 翻格子游戏 状态压缩
考试想到了状压,苦于T1废掉太长时间,于是默默输出impossible.. 我们知道,一个格子的翻转受其翻转次数和它相邻翻转次数的影响. 由每一个位置操作两次相当于把它翻过来又翻回去,所以答案中每一个 ...
- 用分治法解决最近点对问题:python实现
最近点对问题:给定平面上n个点,找其中的一对点,使得在n个点的所有点对中,该点对的距离最小.需要说明的是理论上最近点对并不止一对,但是无论是寻找全部还是仅寻找其中之一,其原理没有区别,仅需略作改造即可 ...
- Linux - 简明Shell编程03 - 字符串(String)
脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash str="Shell ...
- MySQL锁与MVCC
--MySQL锁与MVCC --------------------2014/06/29 myisam表锁比较简单,这里主要讨论一下innodb的锁相关问题. innodb相比oracle锁机制简单许 ...
- php基础函数
函数四要素:返回类型(php没有返回类型), 函数名,参数列表,函数体//php定义函数的方式 简单 例://function show(){// echo "狗头铡伺候" ...
- .NET Core 2.0迁移技巧之MemoryCache问题修复
对于传统的.NET Framework项目而言,System.Runtime.Caching命名空间是常用的工具了,其中MemoryCache类则常被用于实现内存缓存. .NET Core 2.0暂时 ...
- 【Hadoop】执行start-dfs.sh出错
问题1:hadoop2.7.3部署警告: Unable to load native-hadoop library for your platform 解决办法: 1.编辑hadoop-env.sh ...