面试官：JS是如何实现下拉刷新和上拉加载的！
本文已收录前端面试题库1.前言下拉刷新和上拉加载是移动端经常出现的两种交互方式，本质上相当于PC网页中的分页，但是交互形式不同。开源社区中也有很多优秀的解决方案。iscroll、better-scroll、pulltorefresh.js库等第三方库使用起来非常方便。我们以原生的方式实现了上拉加载和下拉刷新，有助于更好的理解和使用第三方库。,实现原理上拉加载和下拉刷新都依赖于用户交互。最重要的是了解在什么场景下以及何时触发交互动作。上拉加载可以先看一张图。页面即将触底时的动作判断我们需要了解以下属性scrollTop：滚动窗口高度到窗口顶部的距离，随着向上滚动会不断增加，初始值为0，是一个变化的值clientHeight：是一个固定值，表示屏幕可见区域的高度；scrollHeight：当页面无法滚动时不存在，当body长度超过窗口时会出现。想出一个打底公式：scrollTop+clientHeight>=scrollHeight简单实现letclientHeight=document.documentElement.clientHeight;//浏览器高度letscrollHeight=document.body.scrollHeight;letscrollTop=document.documentElement.scrollTop;让距离=50;//当距离窗口为50时，开始触发；if((scrollTop+clientHeight)>=(scrollHeight-distance)){console.log("开始加载数据");}下拉刷新的本质是页面在置顶时，需要的动作当用户下拉时触发。关于下拉刷新的原生实现，主要分为三步：监听原生的touchstart事件，记录其初始位置的值，e.touches[0].pageY；监听原生touchmove事件，记录并计算当前滑动位置值与初始位置值的差值，大于0表示下拉，使用CSS3的translateY属性使元素跟随手向下滑动电位对应的差值，也应设置允许滑动的最大值；监听原生的touchend事件，如果此时元素滑动到最大值，则触发回调，将translateY重置为0，元素回到初始位置为例：Html结构如下：
111222333444555...监听touchstart事件，记录初始值var_element=document.getElementById('refreshContainer'),_refreshText=document.querySelector('.refreshText'),_startPos=0,//初始值_transitionHeight=0;//移动距离_element.addEventListener('touchstart',function(e){_startPos=e.touches[0].pageY;//记录初始位置_element.style.position='relative';_element.style.transition='转换0';},false);监听touchmove移动事件，记录滑动差异_element.addEventListener('touchmove',function(e){//e.touches[0].pageY当前位置_transitionHeight=e.touches[0].pageY-_startPos;//糟糕的记录值if(_transitionHeight>0&&_transitionHeight<60){_refreshText.innerText='下拉刷新';_element.style.transform='translateY('+_transitionHeight+'px)';if(_transitionHeight>55){_refreshText.innerText='发布更新';}}}，错误的）;最后就是监听touchend离开的事件_element.addEventListener('touchend',function(e){_element.style.transition='transform0.5sease1s';_element.style.transform='translateY(0px)';_refreshText.innerText='正在更新...';//todo...},false);从上图可以看出，在下拉到放手的过程中，三个第一阶段：当前手势滑动位置与初始位置的差值大于零时，提示下拉刷新操作正在处理。更新操作三、案例在实际开发中，我们使用的第三方库较多。下面以better-scroll为例：HTML结构查看更多 实例化上拉下拉插件，注册插件使用importBScrollfrom"@better-scroll/core";importPullDownfrom"@better-scroll/pull-down";importPullUp来自“@better-scroll/pull-up”；BScroll.use(PullDown);BScroll.use(上拉);实例化BetterScroll，并传入相关参数letpageNo=1,pageSize=10,dataList=[],isMore=true;varscroll=newBScroll("#position-wrapper",{scrollY:true,//垂直滚动click:true,//默认会屏蔽浏览器原生的点击事件，如果需要点击，设置为trueherepullUpLoad:true,//上拉加载更多pullDownRefresh:{threshold:50,//触发pullDown事件的位置stop:0//回弹后下拉停留的位置}});//监听下拉刷新scroll.on("pullingDown",pullingDownHandler);//监听实时滚动scroll.on("scroll",scrollHandler);//上拉加载更多scroll.on("pullingUp",pullingUpHandler);异步函数pullingDownHandler(){dataList=[];页码=1；是更多=真；$(".more").text("查看更多");awaitgetlist();//请求数据scroll.finishPullDown();//每次下拉后，都需要执行这个操作scroll。refresh();//当滚动区域的dom结构发生变化时，需要执行此操作}asyncfunctionpullingUpHandler(){if(!isMore){$(".more").text("没有更多数据");scroll.finishPullUp();//每次上拉之后，都需要执行这个操作return;}pageNo++;等待this.getlist();//请求数据scroll.finishPullUp();//每次上拉后，需要执行此操作scroll.refresh();//当滚动区域的dom结构发生变化时，需要执行此操作}functionscrollHandler(){if(this.y>50)$('.refresh').text("放手开始加载");else$('.refresh').text("下拉刷新");}functiongetlist(){//返回数据letresult=...;dataList=dataList.concat(结果);//判断是否已经加载if(result.length
