用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 (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...
随机推荐
- 模块sys,os
Python的强大之处在于他有非常丰富和强大的标准库和第三方库,几乎你想实现的任何功能都有相应的Python库支持,以后的课程中会深入讲解常用到的各种库,现在,我们先来象征性的学2个简单的. 在Pyt ...
- POJ2389 Bull Math【大数】
Bull Math Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 15040 Accepted: 7737 Descri ...
- 虚拟 IP 设为静态 IP
一:虚拟机设置桥接模式 1.进入虚拟机设置中将网络适配器设置成桥接模式 2.编辑--虚拟网络编辑器--选择桥接 二:将虚拟IP设置成静态IP (1)方案一:进入虚拟机系统 System 设置 (2)方 ...
- Java——多线程锁的那些事
引入 Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率. 下面先带大家来总体预览一下锁的分类图 1.乐观锁 VS 悲观锁 乐观锁与悲观锁是一种广义上的概念,体现了 ...
- Java——多线程之对象及变量的并发访问
Java多线系列文章是Java多线程的详解介绍,对多线程还不熟悉的同学可以先去看一下我的这篇博客Java基础系列3:多线程超详细总结,这篇博客从宏观层面介绍了多线程的整体概况,接下来的几篇文章是对多线 ...
- Java——Spring整合Mybatis(IDEA版)
本文适用于初学者: 该文主要教大家如何整合spring和mybatis,整合完成效果,可以从数据库中查询出学生信息: 完整的工程目录如下: 整合思路: 需要spring来管理数据源信息. 需要spri ...
- Jmeter-接口测试参数化后循环断言不同内容的方法
前言 各位小伙伴在做接口自动化有没遇到过这样的问题,CSV文件参数化测试数据后,只能通过人工的的方法去查看结果,不懂写代码去循环断言返回的结果.今天我们来学习一下,不用写代码,就用响应断言,怎么实现循 ...
- 树莓派4B踩坑指南 - (15)搭建在线python IDE
今天想在树莓派上自己搭一个在线的python IDE,于是找到了一篇教程--Fred913大神的从头开始制作OJ-在线IDE的搭建 自己尝试动手做了一下, 还是发现不少细节需要注意, 记录在此 如果不 ...
- Go中的数组切片的使用总结
代码示例 package main import "fmt" func main(){ fmt.Println("Hello, world") // 定义数组的 ...
- idea设置配置提示模板
File-->Settings-->LIve Templates-->+-->Template Group(模板名称)-->Live Template