文档章节

js下拉加载更多

whoyouare丶
 whoyouare丶
发布于 2016/09/20 20:07
字数 193
阅读 35
收藏 1

代码如下:

var stop=true; //控制数据为空后 停止加载数据

$(window).scroll(function(){ 
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 
    if($(document).height() <= totalheight){ 
        if(stop==true){ 
            stop=false; 
            loadData();
        } 
    } 
});

 function loadData(){
    //这里写ajax调用方法,并把获取到的更多数据append到页面元素中
    stop = true; //如果没有数据,stop不重新赋值true,并且在页面中提示暂无更多数据
}

实现方法是获取页面总高度和滚动条高度,当滚动条高度+页面总高度 <= 内容高度时加载更多

stop参数是考虑到ajax读取耗时,防止在一次ajax读取过程中多次触发事件,造成多次加载内容

代码需要根据实际应用进行修改​)

© 著作权归作者所有

上一篇: transition初探
whoyouare丶
粉丝 0
博文 7
码字总数 1583
作品 0
海淀
前端工程师
私信 提问
使用js的下拉或添加一个加载更多按钮实现显示数据

上面使用dz门户外部调用显示数据,但我不想让数据一次全部显示出来,如何将数据一次显示10条方式,使用js的下拉或添加一个加载更多按钮来实现呢?

ohya
2013/03/16
6.5K
0
APP7天快速开发教程4:APP开发图片缓存原理

第四天:掌握使用JS模版来实现列表数据,推荐使用doT模版;了解下拉刷新和上拉加载的实现原理及相关API的使用,实现下拉刷新、上拉加载更多功能;了解APICloud图片缓存原理及相关API的使用,...

达斯雷马
2017/02/23
245
0
iscroll pc端正常拉动 手机端异常

代码部分--------------- 找货 找货 下拉重新加载页面 <#list page as orderlo> ${orderlo.fromb}${orderlo.froms} 至 ${orderlo.tob}${orderlo.tos} 发货时间:${orderlo.thsj} 至 ${orderl......

ousiew
2017/03/08
300
0
用sui框架中的下拉刷新在页面没有效果,各位帮忙看看

下拉刷新 下拉刷新 card 这里是第1个card,下拉刷新会出现第2个card。

小红红红
2016/12/06
1K
3
帮助自定义选择框样式的Javascript - DropKick.js

来源:GBin1.com 在线演示 在线下载 当你想要设计一个页面样式时,没有什么比表单更让人头疼了。而当你设计一个表单的样式时,最让你头疼的就应该非下拉框莫属了。 我们可以使用CSS来给定一个...

gbin1
2013/08/30
777
0

没有更多内容

加载失败,请刷新页面

加载更多

Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
47分钟前
5
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
今天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
今天
7
0
轻量级 HTTP(s) 代理 TinyProxy

CentOS 下安装 TinyProxy yum install -y tinyproxy 启动、停止、重启 # 启动service tinyproxy start# 停止service tinyproxy stop# 重启service tinyproxy restart 相关配置 默认...

Anoyi
今天
2
0
Linux创建yum仓库

第一步、搞定自己的光盘 #创建文件夹 mkdir -p /media/cdrom #挂载光盘 mount /dev/cdrom /media/cdrom #编辑配置文件使其永久生效 vim /etc/fstab 第二步,编辑yun源 vim /ect yum.repos.d...

究极小怪兽zzz
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部