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实现上拉加载更多的功能。的更多相关文章

  1. 原生js实现上拉加载

    原生js实现上拉加载其实超级简单,把原理整明白了你也会,再也不用去引一个mescroll啦~ 好了,废话不多说,开始进入正题:上拉加载是怎么去做的,原理就是监听滚动条滑到页面底部,然后就去做一次请求数 ...

  2. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  3. 【前端】上拉加载更多dropload.min.js的使用

    代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...

  4. 微信小程序 scroll-view 完成上拉加载更多

    我们经常在软件客户端上看到这么一个功能,当我们阅读信息浏览到文章的末尾时,通常会加载出更多的信息.比如,我们在简书客户端上浏览推荐文章时,浏览到屏幕的末尾,此时又加载出了另一页的推荐文章,即实现了上拉 ...

  5. Android 开发 上拉加载更多功能实现

    实现思维 开始之前先废话几句,Android系统没有提供上拉加载的控件,只提供了下拉刷新的SwipeRefreshLayout控件.这个控件我们就不废话,无法实现上拉刷新的功能.现在我们说说上拉加载更 ...

  6. SwipeRefreshLayout详解和自定义上拉加载更多

    个人主页 演示Demo下载 本文重点介绍了SwipeRefreshLayout的使用和自定View继承SwipeRefreshLayout添加上拉加载更多的功能. 介绍之前,先来看一下SwipeRef ...

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

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

  8. 移动端实现上拉加载更多(使用dropload.js vs js)

    做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据: 方式一:使用dropload.js; 配置好相关参数及回调函数就可使用:代码如下 var ...

  9. react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)

    1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...

随机推荐

  1. Django-website 程序案例系列-15 singnal分析

    在django框架中singnal的应用相当于在你执行某些重要函数语句时在这条语句的前后放置两个预留的钩子,这两个钩子就是singnal,这个钩子也可以理解成两个触发器,当出现执行语句前后是触发执行某 ...

  2. Django-website 程序案例系列-10 cookie 和 session的应用

    cookie:  现在所有网站基本都要开启cookie 客户端浏览器上的一个文件 例如:   {‘key’: 'sefwefqefwefw'} 是一个键值对 简单实现cookie认证: user_in ...

  3. HDU - 1160 (FatMouse's Speed )最长上升子序列

    题意:一个元素有两个属性 w 和 sp 求在w严格递增的情况下 sp严格递减 用结构体 定义三个参数  w  sp  ix , ix是在输入时的顺序  因为我们要排序 之后把结构体数组 按从小到大排序 ...

  4. innerHTML、outerHTML、innerText、outerText的区别及兼容性问题

    今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...

  5. luogu2577/bzoj1899 午餐 (贪心+dp)

    首先,应该尽量让吃饭慢的排在前面,先按这个排个序 然后再来决定每个人到底去哪边 设f[i][j]是做到了第i个人,然后1号窗口目前的总排队时间是j,目前的最大总时间 有这个i和j的话,再预处理出前i个 ...

  6. Hadoop、Hbase基本命令及调优方式

    HDFS基本命令 接触大数据挺长时间了,项目刚刚上完线,趁着空闲时间整理下大数据hadoop.Hbase等常用命令以及各自的优化方式,当做是一个学习笔记吧. HDFS命令基本格式:Hadoop  fs ...

  7. 【BZOJ2648】SJY摆棋子

    题目大意:维护一个二维平面,平面上初始有 N 个点,支持两种操作:平面加点.查询距离某个指定点的最小哈密顿距离. 题解:学习到了 kd-tree 数据结构. kd-tree 类似于平衡树,即:每个节点 ...

  8. babel的使用及babel与gulp结合工作流

    Babel 通过语法转换器支持最新版本的 JavaScript . 它有非常多的插件,这些插件能够允许我们立刻使用新语法,无需等待浏览器支持. 那我们怎么使用babel呢? 首先我们来了解babel基 ...

  9. Yosimite10.10(Mac os)安装c/c++内存检测工具valgrind

    1.下载支持包m4-1.4.13.tar.gz $ curl -O http://mirrors.kernel.org/gnu/m4/m4-1.4.13.tar.gz 2. 解压m4-1.4.13.t ...

  10. 音乐播放和视频播放--pyglet(一)

    最近,开始学习pyglet库.通过几天的学习,深刻的体会了python第三方模块的强大.我一直想做多媒体开发,曾经尝试用C语言进行编写,但是C语言在GUI开发上难度较大,要写一个界面出来得码很多冗余的 ...