H5下拉刷新和上拉加载实现原理浅析
前言
在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。
实现原理
下拉刷新
实现下拉刷新主要分为三步:
- 监听原生
touchstart
事件,记录其初始位置的值,e.touches[0].pageY
; - 监听原生
touchmove
事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0
表示向下拉动,并借助CSS3的translateY
属性使元素跟随手势向下滑动对应的差值,同时也应设置一个允许滑动的最大值; - 监听原生
touchend
事件,若此时元素滑动达到最大值,则触发callback
,同时将translateY
重设为0
,元素回到初始位置。
示例。查看链接:下拉刷新demo(PC浏览器需调成手机模拟器模式查看)
<main> <p class="refreshText"></p> <ul id="refreshContainer"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> ... </ul> </main>
(function(window) { var _element = document.getElementById('refreshContainer'), _refreshText = document.querySelector('.refreshText'), _startPos = 0, _transitionHeight = 0;_element.addEventListener(</span>'touchstart', <span style="color: #0000ff;">function</span><span style="color: #000000;">(e) { console.log(</span>'初始位置:', e.touches[0<span style="color: #000000;">].pageY); _startPos </span>= e.touches[0<span style="color: #000000;">].pageY; _element.style.position </span>= 'relative'<span style="color: #000000;">; _element.style.transition </span>= 'transform 0s'<span style="color: #000000;">; }, </span><span style="color: #0000ff;">false</span><span style="color: #000000;">); _element.addEventListener(</span>'touchmove', <span style="color: #0000ff;">function</span><span style="color: #000000;">(e) { console.log(</span>'当前位置:', e.touches[0<span style="color: #000000;">].pageY); _transitionHeight </span>= e.touches[0].pageY -<span style="color: #000000;"> _startPos; </span><span style="color: #0000ff;">if</span> (_transitionHeight > 0 && _transitionHeight < 60<span style="color: #000000;">) { _refreshText.innerText </span>= '下拉刷新'<span style="color: #000000;">; _element.style.transform </span>= 'translateY('+_transitionHeight+'px)'<span style="color: #000000;">; </span><span style="color: #0000ff;">if</span> (_transitionHeight > 55<span style="color: #000000;">) { _refreshText.innerText </span>= '释放更新'<span style="color: #000000;">; } } }, </span><span style="color: #0000ff;">false</span><span style="color: #000000;">); _element.addEventListener(</span>'touchend', <span style="color: #0000ff;">function</span><span style="color: #000000;">(e) { _element.style.transition </span>= 'transform 0.5s ease 1s'<span style="color: #000000;">; _element.style.transform </span>= 'translateY(0px)'<span style="color: #000000;">; _refreshText.innerText </span>= '更新中...'<span style="color: #000000;">; </span><span style="color: #008000;">//</span><span style="color: #008000;"> todo...</span>