-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
面试官:如何实现上拉加载,下拉刷新? #90
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
一、前言
下拉刷新和上拉加载这两种交互方式通常出现在移动端中
本质上等同于PC网页中的分页,只是交互形式不同
开源社区也有很多优秀的解决方案,如
iscroll
、better-scroll
、pulltorefresh.js
库等等这些第三方库使用起来非常便捷
我们通过原生的方式实现一次上拉加载,下拉刷新,有助于对第三方库有更好的理解与使用
二、实现原理
上拉加载及下拉刷新都依赖于用户交互
最重要的是要理解在什么场景,什么时机下触发交互动作
上拉加载
首先可以看一张图
上拉加载的本质是页面触底,或者快要触底时的动作
判断页面触底我们需要先了解一下下面几个属性
scrollTop
:滚动视窗的高度距离window
顶部的距离,它会随着往上滚动而不断增加,初始值是0,它是一个变化的值clientHeight
:它是一个定值,表示屏幕可视区域的高度;scrollHeight
:页面不能滚动时是不存在的,body
长度超过window
时才会出现,所表示body
所有元素的长度综上我们得出一个触底公式:
简单实现
下拉刷新
下拉刷新的本质是页面本身置于顶部时,用户下拉时需要触发的动作
关于下拉刷新的原生实现,主要分成三步:
touchstart
事件,记录其初始位置的值,e.touches[0].pageY
;touchmove
事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0
表示向下拉动,并借助CSS3的translateY
属性使元素跟随手势向下滑动对应的差值,同时也应设置一个允许滑动的最大值;touchend
事件,若此时元素滑动达到最大值,则触发callback
,同时将translateY
重设为0
,元素回到初始位置举个例子:
Html
结构如下:监听
touchstart
事件,记录初始的值监听
touchmove
移动事件,记录滑动差值最后,就是监听
touchend
离开的事件从上面可以看到,在下拉到松手的过程中,经历了三个阶段:
三、案例
在实际开发中,我们更多的是使用第三方库,下面以
better-scroll
进行举例:HTML结构
实例化上拉下拉插件,通过
use
来注册插件实例化
BetterScroll
,并传入相关的参数注意点:
使用
better-scroll
实现下拉刷新、上拉加载时要注意以下几点:wrapper
里必须只有一个子元素wrapper
要高DOM
元素是否已经生成,必须要等到DOM
渲染完成后,再new BScroll()
DOM
元素结构有变化后,需要执行刷新refresh()
finishPullUp()
或者finishPullDown()
,否则将不会执行下次操作better-scroll
,默认会阻止浏览器的原生click
事件,如果滚动内容区要添加点击事件,需要在实例化属性里设置click:true
小结
下拉刷新、上拉加载原理本身都很简单,真正复杂的是封装过程中,要考虑的兼容性、易用性、性能等诸多细节
参考文献
The text was updated successfully, but these errors were encountered: