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 ...
随机推荐
- NYOJ--42--dfs--一笔画问题
/* Name: NYOJ--42--一笔画问题 Author: shen_渊 Date: 18/04/17 15:22 Description: 这个题用并查集做,更好.在练搜索,试试手 本来用的v ...
- Jdbc模版式写法与Spring-JdbcTemplate的比较
一.Jdbc模版式写法: [流程] 加载驱动 获取数据库链接 创建Statement对象(用于发送sql语句) 向数据库发送sql语句,获取数据库返回的结果集 从结果集中获取数据 释放资源 上述部分用 ...
- MyEclipse去除网上复制下来的代码带有的行号
正则表达式去除代码行号 作为开发人员,我们经常从网上复制一些代码,有些时候复制的代码前面是带有行号,如: MyEclipse本身自带有查找替换功能,并且支持正则表达式替换,使用正则替换就可以很容易去除 ...
- 微信小程序简单入门1
参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 1 创建项目 开发者工具安装完成后,打开并使用微信扫码登录.选择创建"项 ...
- 阅读:DBA们不得不知的数据库硬件RAID常识
对于数据库这种特殊应用IOPS往往会成为瓶颈,突破的这个瓶颈的有效方法不多,软件方面主要是读写分离,垂直拆分,分区表技术,cluster.硬件方面主要是raid,和SSD. 通常都是软件和硬件同时优化 ...
- vbs系统监控
vbs CPU 内存 硬盘监控脚本 On Error Resume Next Dim dwTotalMem, dwAvailMem, totalvolumn, freespace Const szRo ...
- ASP.NET MVC HtmlHelper用法大全
HTML扩展类的所有方法都有2个参数: 以textbox为例子public static string TextBox( this HtmlHelper htmlHelper, string name ...
- shell学习笔记(一)
1.第一行必须以#!/bin/bash #!表示脚本使用后面的解释器解释执行 2.echo 打印输出 例如 echo "hello world" > aa.txt 3.接 ...
- Redis集群之优化系统参数
1.最大打开文件数量 (1)编辑资源限制文件,针对redis用户做资源访问控制,在文件尾加入最后两行, sudo vim /etc/security/limits.conf (2) sudo vim ...
- GC选择之CMS 并发标记清除
CMS收集器 Concurrent Markup Sweep 并发标记清除 使用了标记-清除算法 与标记-压缩相比,并发阶段会降低吞吐量 算法作用在老年代以及永久区(新生代使用ParNew) -XX: ...