js_原生js实现上拉加载更多的功能。
1.人生啊,是我莽撞了啊。这是我公司一个喜欢读书的女孩子的个性签名,喜欢哪些句子,不悲伤,却切切实实的令人喜好。
2.写程序是一件很直接明了的事情,明白了就是明白了,不懂就是不懂,不懂装懂的会让你走很多弯路,对于我们在度娘上找到的一些方法,我们把它用到项目中的时候,也要把它弄懂,
只有自己弄懂了,才会实打实的沉淀下来,变成属于自己的东西。一个人对于一个问题的态度,终将把你变成那样的人。愿你对一个问题有一种把它切底弄懂的情怀。时间那么浅,别太把它
用来打王者农药了,那段位的荣耀在生活中,终是不能成就你。
3.最近在健身,花钱不少,相信是值得的。
此处以下,是关于技术。
//--------------上拉加载更多---------------
//获取滚动条当前的位置
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);
} //滚动事件触发
window.onscroll = function() {
if(getScrollTop() + getClientHeight() == getScrollHeight()) {
}
}
//-----------------结束--------------------
原理很简单,代码31行做了一个判断getScrollTop() + getClientHeight() == getScrollHeight(),第一个函数获取滚动条的位置,第二个函数获取当前屏幕可见的高度,第三个函数获取当前文档的总高度,
当前两个参数等等第三个参数的时候,就表示文档已经拉到底部了,触发事件向后台请求数据。这样一个分页功能就写出来了。
这里多提一点,向后台请求数据的时候,需要向后台发送一个参数,第一页就是1,第二页就是2,如此用来区分,我们在后台拿到的数据是相对应的。
js_原生js实现上拉加载更多的功能。的更多相关文章
- 原生js实现上拉加载
原生js实现上拉加载其实超级简单,把原理整明白了你也会,再也不用去引一个mescroll啦~ 好了,废话不多说,开始进入正题:上拉加载是怎么去做的,原理就是监听滚动条滑到页面底部,然后就去做一次请求数 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 【前端】上拉加载更多dropload.min.js的使用
代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...
- 微信小程序 scroll-view 完成上拉加载更多
我们经常在软件客户端上看到这么一个功能,当我们阅读信息浏览到文章的末尾时,通常会加载出更多的信息.比如,我们在简书客户端上浏览推荐文章时,浏览到屏幕的末尾,此时又加载出了另一页的推荐文章,即实现了上拉 ...
- Android 开发 上拉加载更多功能实现
实现思维 开始之前先废话几句,Android系统没有提供上拉加载的控件,只提供了下拉刷新的SwipeRefreshLayout控件.这个控件我们就不废话,无法实现上拉刷新的功能.现在我们说说上拉加载更 ...
- SwipeRefreshLayout详解和自定义上拉加载更多
个人主页 演示Demo下载 本文重点介绍了SwipeRefreshLayout的使用和自定View继承SwipeRefreshLayout添加上拉加载更多的功能. 介绍之前,先来看一下SwipeRef ...
- dropload.js(上拉加载插件使用过程中遇到的坑)
dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...
- 移动端实现上拉加载更多(使用dropload.js vs js)
做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据: 方式一:使用dropload.js; 配置好相关参数及回调函数就可使用:代码如下 var ...
- react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)
1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...
随机推荐
- mangTomany 自关联之个人感悟
介绍: 应用场景:评论表 manyTomany 原则上就是一个类 自己建立一个关系表 这个关系表的列 由自己定义 例如 图中 from_userinfo_id() 是人为规定的 男生列 to_use ...
- 国产首款5G手机抢先亮相:如此给力的说!
5G网络是接下来移动互联网发展的主旋律,各家都在努力跟进,目前最积极的当属手机厂商,而2019年我们就能看到多款5G手机降临了. 在11月27日的未来信息通信技术国际研讨会上,vivo展示了他们正在研 ...
- HDU4403-模拟、数学
一道很难的奥数题,给出一个数字串,插入加号和等号使之成立.求成立的算式数. 我的做法是,先分成两段,中间插入等号 ,再分别求出左右两边可能的值和个数,然后对比,把值相等的情况乘起来,加到最终结果上. ...
- FreeBSD ZFS
FreeBSD ZFS https://www.cnblogs.com/hadex/p/6068476.html 参考資料 http://docs.oracle.com/cd/E37934_01/ht ...
- MT【215】集合中元素个数
设$M=\{1,2,3\cdots,2010\}$,$A$是$M$的子集且满足条件:当$x\in A$时$15x\notin A$,则$A$中的元素的个数最多是______ 分析:由于$x,15x,( ...
- 【CF960G】Bandit Blues(第一类斯特林数,FFT)
[CF960G]Bandit Blues(第一类斯特林数,FFT) 题面 洛谷 CF 求前缀最大值有\(a\)个,后缀最大值有\(b\)个的长度为\(n\)的排列个数. 题解 完完全全就是[FJOI] ...
- 洛谷 P2587 [ZJOI2008]泡泡堂 解题报告
P2587 [ZJOI2008]泡泡堂 题目描述 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表队由n名选手组成,比赛的项目是老少咸宜的网络游戏 ...
- luogu4360 锯木厂选址 (斜率优化dp)
设: sw[i]为1..i的w之和 sd[i]为1到i的距离 cost[i]为把第一个锯木厂建在i带来的花费 all[i,j]为把i..j所有木头运到j所需要的花费 所以$all[i,j]=cost[ ...
- 利用NEST2.0 在C#中操作Elasticsearch
前言:本文主要演示了如何通过c#来操作elasticsearch,分两个方面来演示: 索引数据 搜索数据 Note: 注意我索引数据和搜索数据是两个不同的例子,没有前后依赖关系 准备工作:需要在vis ...
- Android 自定义ImageView支持缩放,拖拽,方便复用
今天刚发了一篇关于ImageView的缩放和拖拽的博客,然后我想了下,将他自定义下,方便我们来复用这个imageView,效果我就不多说了,http://blog.csdn.net/xiaanming ...