移动端 上拉刷新，下拉加载 效果

前言

在移动端H5网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如iscroll，pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。

实现原理

下拉刷新

实现下拉刷新主要分为三步：

• 监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY；
• 监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值；
• 监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置。

 

在下拉到松手的过程中，经历了三个状态：

• 当前手势滑动位置与初始位置差值大于零时，提示正在进行下拉刷新操作；
• 下拉到一定值时，显示松手释放后的操作提示；
• 下拉到达设定最大值松手时，执行回调，提示正在进行更新操作。

上拉加载

上拉加载更多数据是在页面滚动时触发的动作，一般是页面滚动到底部时触发，也可以选择在滚动到一定位置的时候触发。

以滚动到页面底部为例。实现原理是分别获得当前滚动条的scrollTop值、当前可视范围的高度值clientHeight以及文档的总高度scrollHeight。当scrollTop和clientHeight的值之和大于等于scrollHeight时，触发callback。

 

	
	
	
	



	

	

		
111
		
222
		
333
		
444
		
555
		
111
		
222
		
333
		
444
		
555
		
111
		
222
		
333
		
444
		
555
	
	

　　

 

小结

上拉刷新的实现主要依靠的是touch事件的三个阶段，以及借助CSS3动画效果；下拉加载主要依靠页面的onscroll事件，需要注意的是页面滚动时可能要考虑函数节流。