h5上滑刷新(分页)
$('.dom').append('<div class="loadingwrap" id="loading" style="display:none"><img src="' + base + '../images/loading.gif"/></div>');
$(window).scroll(function(){
if(($(window).scrollTop()+$(window).height() >= $(document).height()-10)){
var url = '',
totalPage = 4;
pageCount = Loader(url,totalPage,$('.dom'));
}
});
Loader = function(url, totalPage, el) {
var scrollflag = true;
if (scrollflag) {
if (pageCount <= totalPage) {
$('#loading,.loadingwrap').show();
$.ajax({
type: 'POST',
url: url,
data: {page: pageCount},
dataType: 'json',
beforeSend: function () {
scrollflag = false;
$('#loading').show();
},
success: function (result) {
el.append(result.data);
pageCount++;
},
error: function (xhr, type) {
},
complete: function () {
scrollflag = true;
$('#loading,.loadingwrap').hide();
}
});
}
}
return pageCount;
}
h5上滑刷新(分页)的更多相关文章
- Ionic上滑刷新
上拉加载用的是ionic控件ion-infinite-scroll,使用示例如下: <ion-infinite-scroll (ionInfinite)="doInfinite($ev ...
- 移动端 H5 上拉刷新,下拉加载
http://www.mescroll.com/api.html#options 这里有几个重要的设置 1.down 下不启用下拉刷新是因为再手机端有默认的下拉刷新,会冲突,待解决 2.up 中的 a ...
- H5上滑跳转页面
方法一: jquery方法 movePage($('body')); function movePage(dom) { var startY, moveY, moveSpave; dom.on(&qu ...
- 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)
| 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...
- 使用MJRefresh遇到的一个问题,上拉刷新后tableview瞬间滑到最底部
最近用MJRefresh上拉刷新时遇到一个问题,就是上拉刷新后,tableview会瞬间滑到最底部,用户还要往回翻才能看到新刷出来的数据,体验十分不好.查了很久没找到原因,最后发现在refreshvi ...
- Android的ListView分页功能(上滑加载更多)
今天主要工作是将之前实现的各种ListView显示全部信息,优化成了每次加载几条数据,然后上滑的时候加载更多,底部显示一个进度条和一个文字提示,然后加载完毕后,将提示信息隐藏. 一边看教学视频一遍敲代 ...
- Android如何定制一个下拉刷新,上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- vue项目上滑滚动加载更多&下拉刷新
上滑滚动时获取内容高度.屏幕高度和滚动高度(此处#sslist要为内容是id) 内容高度 let innerHeight = document.querySelector("#sslist ...
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
随机推荐
- WEB前端常用网站收集
WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap 官网 h ...
- Hibernate,JPA注解@SecondaryTables
使用类一级的 @SecondaryTable或@SecondaryTables注解可以实现单个实体到多个表的映射. 使用 @Column或者 @JoinColumn注解中的table参数可指定某个列所 ...
- android 代码整体回退
repo forall -c 'HAHA=`git log --before="3 days" -1 --pretty=format:"%H"`;git res ...
- YTU 3020: 对称矩阵(数组)
3020: 对称矩阵(数组) 时间限制: 1 Sec 内存限制: 128 MB 提交: 3 解决: 2 题目描述 已知A和B为两个n*n阶的对称矩阵,输入时,对称矩阵只输入下三角行元素,存入一维数 ...
- WPF中viewmodel层怎样得到view层的TabControl控件对象?
View层: <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: ...
- js post提交页面
function post(URL, PARAMS) { var temp = document.createElement("form"); temp.action = URL; ...
- python-day6 常见算法 python内置模块
1.冒泡排序 需求:请按照从小到大对列表 [13, 22, 6, 99, 11] 进行排序 原理:相邻两个值进行比较,将较大的值放在右侧,依次比较! li=[39,11,43,88,765,9]for ...
- Uva 1218 完美的服务
题目链接:https://uva.onlinejudge.org/external/12/1218.pdf 题意: 一个网络,选出一些点做服务器,使满足一些条件,求服务器最少数量.条件是,每个计算机恰 ...
- 基于APK的Robotium登录人人网与发状态
搭建好Robotium的环境,大致就是下载安装jdk并配置环境变量,下载并打开Eclipse,下载安装Android SDK Tools并配置环境变量,下载安装ADT插件,创建并打开Android V ...
- PHPExcel的使用与手册说明
1.下载PHPExcel插件 2.解压后提取classes文件夹到工作目录,并重命名为PHPExcel 下载地址:http://phpexcel.codeplex.com/ 3.引入与实例化 ...