用jquery写一个上拉加载
/*可加载页面吗*/
function canLoadMore() {
return $('.loadin').length < 1;
}
/*移除正在加载字样*/
function removeMore() {
$('.loadin').remove();
}
/*没有更多内容字样*/
function noMore($contentBox) {
$('.loadin').html('<div style="color: #999;font-size: 36px">没有更多了...</div>');
}
/*设置正在加载*/
function setMore($contentBox) {
$contentBox.append(
'<div class="loadin"><img src="../images/toLoad/toLoad.gif" alt=""></div>'
);
} /**
* 加载页面
* @param $contentBox object 容器
* @param url string 翻页请求的url
* @param $scrollBox object 容器
* @param param object 请求参数
* @param afterMoreMethod function
*/
function pageMore($contentBox,url,$scrollBox=null,param=null,afterMoreMethod=null){
// alert()
console.log($contentBox)
if($contentBox.length < 1)
return ; if($scrollBox == null)
$scrollBox = $contentBox; var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
//滚动时候获取显示区域高度
var hi = parseInt($scrollBox.get(0).offsetHeight);
console.log(hi,"offset");
$scrollBox.scroll(function () {
hi = hi == 0 ? parseInt($scrollBox.get(0).offsetHeight) : hi;
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
var paddingBottom = parseInt($(this).css('padding-bottom')),
paddingTop = parseInt($(this).css('padding-top')); console.log(nScrollHight, nScrollTop + paddingBottom + paddingTop + hi, hi);
if (nScrollTop + paddingBottom + paddingTop + hi >= nScrollHight) {
more();
}
}); $contentBox.data('page-num',1); function more() {
if(!canLoadMore()) return;
setMore($contentBox);
var page_num = $contentBox.data('page-num');
page_num = parseInt(page_num) + 1;
param = param ? param : Object();
param.page_num = page_num;
$.get(url,param,function(result){
if(result.code==1){
$contentBox.append(result.data.html);
$contentBox.data('page-num',page_num);
removeMore();
if(afterMoreMethod!==null)
afterMoreMethod();
}else{
noMore();
}
},'json')
}
} 调用时候直接pageMore($('参数一'),null,$('参数二')),
d
用jquery写一个上拉加载的更多相关文章
- jquery 和 mui 上拉加载
jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...
- 原生ajax写的上拉加载
上拉加载的思路 1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据 2.所有要获取屏幕的高度 文档的高度 和滚动的高度 下面的代码是已经做好了兼容的可以直接拿来用 Javascript: ...
- 基于better-scroll封装一个上拉加载下拉刷新组件
1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...
- JQuery代码实现上拉加载(不使用插件)
<script type="text/javascript"> $(window).scroll(function() { //已经滚动到上面的页面高度 var sl_ ...
- 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法
1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
- Android 上拉加载更多功能
前几天看了github上面的例子,参照它的实现,自己又稍微改了一点,往项目里面增加了一个上拉加载更多功能.具体的实现如下: 首先要重写ListView: import android.content. ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- dropload.js(上拉加载插件使用过程中遇到的坑)
dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...
随机推荐
- Hard filters (by GATK)
Filter Symbol T. Definition QualByDepth QD 2.0 The variant confidence (from the QUAL field) divided ...
- Eclipse Mac OS 安装 Subversion插件subclipse 缺失JavaHL解决方案
安装 SVN 插件 subclipse 时可能遇到问题 subclipse 安装完成后,当我们选择使用 的时候还是会提示:javaHL not available, SVN接口选择 client:选择 ...
- json序列化字符串后,配置枚举类型显示数值而不是名称
2019独角兽企业重金招聘Python工程师标准>>> 经常有这么一个需求,实体类里面用到枚举常量,但序列化成json字符串时.默认并不是我想要的值,而是名称,如下 类 @Data ...
- QTP VBScript RegExp对象的运用
下面来讲讲RegExp对象: Vbs提供了针对正则表达式的一个非常实用的类,就是RegExp Global属性:代表全局匹配 IgnoreCase属性:大小写忽略 Pattern属性:正则表达式 Ex ...
- 使用Xamarin开发即时通信系统 -- 基础篇(大量图文讲解 step by step,附源码下载)...
如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!而且,Xamarin已经被微 ...
- USACO Training Section 1.1 贪婪的送礼者Greedy Gift Givers
P1201 [USACO1.1]贪婪的送礼者Greedy Gift Givers 题目描述 对于一群(NP个)要互送礼物的朋友,GY要确定每个人送出的钱比收到的多多少.在这一个问题中,每个人都准备了一 ...
- CodeForces - 262B
Roma works in a company that sells TVs. Now he has to prepare a report for the last year. Roma has g ...
- Nginx模块开发(5)————开发简单的HTTP过滤模块
该模块可实现如下的功能,在浏览器输入http://你的IP/lcw.text,能够读出你在根目录下创建的lcw.txt里面的内容,并在前面加上一句字符串where there is a will,th ...
- 课堂管理系统;在线教辅平台;java课设
# 白泽智慧教辅平台 **说明:** 运行时需要修改位置: bzedu\src\main\resources\application.properties bzedu\src\main\resourc ...
- golang之array
golang使用array表示固定大小的数组,使用slice表示动态数组. package main import "fmt" func main() { var a = [5]i ...