原生js怎么实现下拉刷新和上拉加载更多

魁首哥

作者

原生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...

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><title>Document</title><styletype="text/css">*{margin:0;padding:0;list-style:none;}.container{/*容器原始位置向上移动60px,隐藏掉loading盒子,下拉时才显示出来*/position:relative;top:-100px;}.container.loading{text-align:center;height:100px;line-height:100px;}.container.list{border:1pxsolid#666;}.container.listli{line-height:80px;}.container.listli:nth-child(2n){background-color:#ccc;}</style></head><body><sectionclass="container"><sectionclass="loading"><span>下拉刷新</span></section><sectionclass="list"><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li><li>我是内容</li></section></section></body><scripttype="text/javascript">//滚动容器constcontainer=document.querySelector('.container');//loading文字容器constspan=container.querySelector('span');letstartPosition=0;//下拉的开始位置letdistance=0;//下拉距离的差值//手指按下时container.addEventListener('touchstart',function(e){//在回弹后的下一次下拉按下时重置loading文本span.textContent='下拉刷新';//记录开始位置startPosition=e.touches[0].pageY;})//手指移动时container.addEventListener('touchmove',function(e){//计算下拉差值constcurrentPosition=e.touches[0].pageY;//计算下拉后离开始位置的差值distance=currentPosition-startPosition;//如果下拉差值达到,则提示可以松手了这个达到的具体值这里是取的下拉出来的区域高度if(distance>100){//案例以100为临界值,超过了100的距离就提示释放刷新span.textContent='释放刷新';}//限制下滑的最大值为120,超过就不再下滑if(distance<120){//容器的这个下滑是瞬时的取消过渡效果this.style.transition='transform0s';this.style.transform=`translateY(${distance}px)`}})//手指松开时container.addEventListener('touchend',function(e){//回弹的动作可以给个1s的过渡效果this.style.transition='transform1s';//如果下拉差值并没有达到则直接回弹if(distance>0&&distance<100){this.style.transform=`translateY(0px)`return;}if(distance>100){//下拉差值达到了就显示刷新中,并暂时定格在这个位置this.style.transform=`translateY(100px)`;span.textContent='刷新中';//等数据回来后显示刷新成功1s然后再回弹到这里本次整个下拉执行完毕setTimeout(()=>{//setTimeout模拟异步请求真实开发这里是一个promise请求span.textContent='刷新成功';//这个setTimeout让刷新成功显示一秒后再回弹setTimeout(()=>{this.style.transform=`translateY(0px)`},1000)},2000);}//一次下拉结束后重置差值distance=0;})</script></html>

效果如图所示: