H5 页面下拉加载更多
1.html页面:
<body onload="index_roll()">
...
</body>
2.js
<script type="application/javascript">
//获取滚动条当前的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
};
//获取当前可是范围的高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}; //获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}; var num=1;
//滚动加载
function index_roll(){
window.addEventListener('scroll', function(){
if (getScrollTop() + getClientHeight() >= (getScrollHeight()-10)) {
//要执行的方法
console.log("打印"+num);
num++;
}
})
}
</script>
H5 页面下拉加载更多的更多相关文章
- H5页面下拉加载更多(实用版)
近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件 还可以,但是 ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- jquery实现下拉加载更多
下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...
- 下拉加载更多DEMO(js实现)
项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...
- 微信小程序实现上拉和下拉加载更多
在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...
- Windows Phone 8.1开发：如何让ListView下拉加载更多？
Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...
- iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
- dropload.js下拉加载更多
项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...
- JQ下拉加载更多
<!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...
随机推荐
- Spring Boot使用@Async实现异步调用：自定义线程池
前面的章节中,我们介绍了使用@Async注解来实现异步调用,但是,对于这些异步执行的控制是我们保障自身应用健康的基本技能.本文我们就来学习一下,如果通过自定义线程池的方式来控制异步调用的并发. 定义线 ...
- git常用命令（todo...）
git init在目录中执行 git init,就可以创建一个 Git 仓库 git add test.javagit add 命令可将该文件添加到缓存(暂存区) git commit test.ja ...
- python解析json数据
现在的API接口多为xml或json,json解析更简洁相对xml来说 以豆瓣的API接口为例,解析返回的json数据: https://api.douban.com/v2/book/1220562 ...
- Error:Could not determine the class-path for interface com.android.builder.model.AndroidProject.
Android Studio导入Eclipse项目报错Error:Could not determine the class-path for interface com.android.builde ...
- 删除Myeclipse中废弃的workspace记录
一个不用的workspace被我们删除后,但是在工作空间切换时File --> Switch Workspace,旧的 workspace 选项还会存在,看着很碍眼.删除遗留 workspace ...
- Servlet 分页保存查询条件
第一种情况:一个页面走一个JSP页面和Servlet 解决办法: /** 把用户这一次选择的所有条件保存Map集合中,再把 map存到Session会话中,点击分页时进入将Servlet中再将Sess ...
- ActiveMQ——activemq的报错见解javax.jms.JMSException: Software caused connection abort: recv failed
activeMQ出现javax.jms.JMSException: Software caused connection abort: recv failed的问题解决 一直找不到原因,原来是在本地的 ...
- Leetcode 759. Employee Free Time
思路:区域覆盖问题.一个自然的想法是将每个员工的工作时间段看做一个木棒,每个木棒的长度就是这个时间段的时长.然后按照木棒的起始位置升序排列,接着由低位置向高位置一个木棒一个木棒的看过去.如果当前木棒的 ...
- KMP算法理解（转）
(作者matrix67) KMP算法是拿来处理字符串匹配的.换句话说,给你两个字符串,你需要回答,B串是否是A串的子串(A串是否包含B串).比如,字符串A="I'm matrix67&quo ...
- Checkpoints(第十一届河南省省赛真题)
题目描述 As a landlocked country in central and southern Africa , the political situation has been relat ...