原生js怎么实现下拉刷新和上拉加载更多
本篇文章为大家展示了原生js怎么实现下拉刷新和上拉加载更多，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
JavaScript是什么
JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，主要用于web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。
1.下拉刷新
由于原生js太久不用了,这里列一下此处涉及到的前置知识点:
移动端触屏事件: touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时)
手指在页面上的坐标: pageX,pageY
写之前首先要懂原理,下拉刷新的本质就是用户在页面顶部进行上拉动作时拉到一定的距离触发数据刷新.
大概需要做的几个点:
1.在手指按下时(touchstart)记录手指的按下位置
2.在手指下滑时(touchmove)计算手指的坐标离手指按下时初始位置的差值得出下滑的距离,让容器顺应手指下滑的方向移动(translateY)对应差值的距离,对应的给一个允许用户下滑的最大距离,避免页面下拉过长.
3.在手指松开时(touchend)判断下滑的差值是否达到预期的值来进行对应的刷新数据和回弹loading.
less word,show me the code...
Document 下拉刷新 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
效果如图所示:
2.上拉加载
前置js知识点: 三个dom属性
*clientHeight:不包含边框的元素可视区高度
*scrollTop:元素滚动时卷上去的距离
*scrollHeight: 元素实际高度,包含卷上去的高度
知道了上述三个属性后,于是就有了一个公式:
clientHeight + scrollTop <= scrollHeight - 触底的指定距离
然后就是上拉加载的原理:
通过监听元素的滚动事件(scroll)判断元素是否滚动到了距离底部指定距离时触发加载数据
知道了原理和三者之间的关系后,我们就知道只需要判断这个公式即可知道滚动条有没有进入触底距离,话不多说show code~
Document 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
效果如图：
上述内容就是原生js怎么实现下拉刷新和上拉加载更多，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。
