/*可加载页面吗*/
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写一个上拉加载的更多相关文章

  1. jquery 和 mui 上拉加载

    jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...

  2. 原生ajax写的上拉加载

    上拉加载的思路 1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据 2.所有要获取屏幕的高度 文档的高度 和滚动的高度 下面的代码是已经做好了兼容的可以直接拿来用 Javascript: ...

  3. 基于better-scroll封装一个上拉加载下拉刷新组件

    1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...

  4. JQuery代码实现上拉加载(不使用插件)

    <script type="text/javascript"> $(window).scroll(function() { //已经滚动到上面的页面高度 var sl_ ...

  5. 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法

    1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...

  6. Android 上拉加载更多功能

    前几天看了github上面的例子,参照它的实现,自己又稍微改了一点,往项目里面增加了一个上拉加载更多功能.具体的实现如下: 首先要重写ListView: import android.content. ...

  7. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  8. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  9. dropload.js(上拉加载插件使用过程中遇到的坑)

    dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...

随机推荐

  1. Golang-filepath使用

    Golang-filepath 使用 获取当前目录 os.GetPWD() filepath.Abs(path) # 绝对目录 filepath.Dir(path) # 相对目录 可以 filepat ...

  2. ES6的let和const命令(一)

    2019独角兽企业重金招聘Python工程师标准>>> ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变 量,只在let命令所在的代码块内有效. let   ...

  3. xml文件错误

    2019独角兽企业重金招聘Python工程师标准>>> xml文件错误The processing instruction target matching "[xX][mM ...

  4. React技术栈——Redux

    Redux 1.Redux是什么?   Redux对于JavaScript应用而言是一个可预测状态的容器.换言之,它是一个应用数据流框架,而不是传统的像underscore.js或者AngularJs ...

  5. 跟风微信小程序,生鲜水果店如何借力小程序每天多赚2万块?

    公司旁边的水果店,虽然是一家实体店,但老板有一颗爱玩互联网的心. 老板非常重视线上的营销推广,什么新的线上推广方式都爱尝试一下.公众号大热时做了自己的微信公众号,并且有自己的微信商城,不过线上的销售一 ...

  6. 《C程序设计语言》 练习1-21

    问题描述 编写程序entab,将空格串替换为最少数量的制表符和空格,但要保持单词之间的间隔不变.假设制表符终止位的位置与练习1 - 20的detab程序的情况相同.当使用一个制表符或者一个空格都可以到 ...

  7. postman(介绍)

    Postman 界面介绍 一. 安装后首次打开 postman,会提示你是否需要登录,登录的话可以云端保存你的收藏及历史记录,不登陆不影响使用.   二. 进入后就是如下图所示的界面了.看到这么多按钮 ...

  8. 一个epoll的简单例子

    epoll事件机制的触发方式有两种:LT(电平触发)和ET(边沿触发) EPOLLIN事件: 内核中的socket接收缓冲区 为空(低电平) 内核中的socket接受缓冲区 不为空(高电平) EPOL ...

  9. LeetCode 45. 跳跃游戏 II | Python

    45. 跳跃游戏 II 题目来源:https://leetcode-cn.com/problems/jump-game-ii 题目 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素 ...

  10. 小白,你要的Java抽象类,操碎了心!

    自从给小白写了两篇科普性质的文章后,我就有点一发不可收拾,觉得很有必要继续写下去.因为有读者留言"鼓励"我说,"二哥,你真的是为小白操碎了心啊!"我容易吗?我. ...