纯jq实现移动端上拉,下拉加载

在移动端实现上拉,下拉操作,首先会想到使用 touchstart 和 touchend。分别表示 手指触碰屏幕开始  和 手指离开屏幕。(同理,如果不做移动端,则使用的是 onmousedown 和 onmouseup,写法上大同小异)

分别监听两个事件:

监听 touchstart
监听 touchend

通过 startX,startY(开始位置) 和 endX,endY(结束位置)来判断是上拉动作还是下拉动作。做到这一步上拉和下拉的功能已经完成,但是整个页面操作起来会很难看。所以我增加了一步,加一个页面被拉动的效果。 

这一次加多一个事件 touchmove (手指在屏幕上移动)。分别写三个事件直接操作外层的div的位置

拉动div块

这是最终的效果:

效果图

你可能感兴趣的:(纯jq实现移动端上拉,下拉加载)