用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 (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...
随机推荐
- #Week5 Regularization
一.The Problem of Overfitting 欠拟合(high bias):模型不能很好地适应训练集: 过拟合(high variance):模型过于强调拟合原始数据,测试时效果会比较差. ...
- Damaged Hard Drive and Reinstall System
0 缘由 我是ACER笔记本,电脑从桌子上重摔,之后几天可以正常使用.可是后来看完视频准备退出的时候,发现所有页面已经卡死了,内存占用已经超过了80%,任务管理器没有反应,不得已按了电源键强制关机. ...
- codeforce 227E 矩阵快速幂求斐波那契+N个连续数求最大公约数+斐波那契数列的性质
E. Anniversary time limit per test2 seconds memory limit per test256 megabytes inputstandard input o ...
- HTML(表格标签)
<table> 标签 表格由 <table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义) ...
- JDK 配置环境变量
1.配置环境变量 右击 我的电脑 --> 属性 --> 高级系统设置 --> 高级 --> 环境变量 在系统变量里新建 JAVA_HOME 变量,变量值如下 D:\work_s ...
- centos安装libconfig
安装很简单,生成的.so文件会被安装到/usr/local/lib目录,记得修改/etc/profile. 安装过程会出现两个错误: What is makeinfo, and how do I ge ...
- D. Count the Arrays 计数题
D. Count the Arrays 也是一个计数题. 题目大意: 要求构造一个满足题意的数列. \(n\) 代表数列的长度 数列元素的范围 \([1,m]\) 数列必须有且仅有一对相同的数 存在一 ...
- E. Marbles 状压dp
E. Marbles 这个是一个状压dp 题目大意是:给你一个数组,数组的数在1到20之间,有一个操作就是交换相邻的两个数,问 让所有相同的数相邻的最小操作次数 dp[s] 表示s状态下的操作次数,w ...
- Git 获取远程仓库指定分支内容
1. 在本地一个空的文件夹中 git init (生成本地仓库) 2. 在刚刚的文件夹中随便建立一个文件 ,git add . (为了生成分支)(提交到暂存区) 3. git commit -m'1 ...
- 送你一份Redis书单,以后使用缓存的问题不用再问我啦!
点击蓝色"程序员书单"关注我哟 加个"星标",每天带你读好书!