html5 手机端分页,哪位大神可以提供个移动端h5下拉分页的方法

例如，京东的分页效果

$PageIndex = 1;

var $uzaiProducts = $doc.getElementsByClassName('uzai-products')[0]; // 产品列表

//console.log($uzaiProducts)

var _pages = $doc.getElementsByClassName('uzai-pages')[0],

_pag = _pages.getElementsByClassName('spa')[0],

_allpag = _pages.getElementsByClassName('all-page')[0];

var _filterMask = $doc.getElementsByClassName('uzai-filter-mask')[0];

var startx, starty;

//获得角度

var getAngle = function(angx, angy) {

return Math.atan2(angy, angx) * 180 / Math.PI;

};

//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动

var getDirection = function(startx, starty, endx, endy) {

var angx = endx - startx;

var angy = endy - starty;

var result = 0;

//如果滑动距离太短

if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {

return result;

}

var angle = getAngle(angx, angy);

if (angle >= -135 && angle <= -45) {

result = 1;

} else if (angle > 45 && angle < 135) {

result = 2;

} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {

result = 3;

} else if (angle >= -45 && angle <= 45) {

result = 4;

}

return result;

};

$uzaiProducts.addEventListener('touchstart', function(e) {

startx = e.touches[0].pageX;

starty = e.touches[0].pageY;

}, false);

//手指离开屏幕

$uzaiProducts.addEventListener('touchmove', function(e) {

//

//if(getStyle(_filterMask,'display') === 'block'){

// e.preventDefault();

//}

var endx, endy;

endx = e.changedTouches[0].pageX;

endy = e.changedTouches[0].pageY;

var direction = getDirection(startx, starty, endx, endy);

_pages.style.display = 'block';

var $uzaiProduct = $doc.getElementsByClassName('uzai-products')[0],

$pLi = $uzaiProduct.getElementsByTagName('li');

//ele.getBoundingClientRect().top > window.innerHeight // 元素在当前屏下面

//ele.getBoundingClientRect().bottom < 0 // 元素在当前屏上面

if (window.innerHeight + document.body.scrollTop >= document.body.scrollHeight) {

//console.log('到底了!');

if ($isLoadli) {

$PageIndex++;

addProduct($PageIndex);

//console.log($PageIndex);

}

}

switch (direction) {

case 0: // 未滑动

//console.log("未滑动！");

break;

case 1: // 向上

//console.log("向上！");

if ($pLi.length > 0) {

var _arr = [];

var _top, _bottom, _se, _cur, _num;

for (var i = 0, len = $pLi.length; i < len; i++) {

_top = $pLi[i].getBoundingClientRect().top; //元素顶端到可见区域顶端的距离

_bottom = $pLi[i].getBoundingClientRect().bottom;

_se = document.documentElement.clientHeight; //浏览器可见区域高度。

if ((_top <= _se) && (_bottom > 0)) {

_cur = Number($pLi[i].getAttribute('data-cur-page'));

_arr.push(_cur);

_num = Math.max.apply(null, _arr);

_pag.innerHTML = _num;

}

}

}

//if(getStyle(_filterMask,'display') === 'block'){

// e.preventDefault();

// console.log(11);

//}else {

// console.log(222);

//}

break;

case 2: // 向下

//console.log("向下！");

if ($pLi.length > 0) {

var _arr = [];

var _top, _bottom, _se, _cur, _num;

for (var i = 0, len = $pLi.length; i < len; i++) {

_top = $pLi[i].getBoundingClientRect().top; //元素顶端到可见区域顶端的距离

_bottom = $pLi[i].getBoundingClientRect().bottom;

_se = document.documentElement.clientHeight; //浏览器可见区域高度。

if ((_top <= _se) && (_bottom > 0)) {

_cur = Number($pLi[i].getAttribute('data-cur-page'));

_arr.push(_cur);

_num = Math.min.apply(null, _arr);

_pag.innerHTML = _num;

}

}

}

break;

default:

}

}, false);

$uzaiProducts.addEventListener('touchend', function() {

setTimeout(function() {

_pages.style.display = 'none';

}, 1000);

});

可以参考下getBoundingClientRect的用法，主要处理滚动的时候底部分页页数的展示，如果不需要，可以忽略！