84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
哪位大神可以提供个移动端下拉分页的方法
光阴似箭催人老,日月如移越少年。
H5还是app
例如,京东的分页效果
$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的用法,主要处理滚动的时候底部分页页数的展示,如果不需要,可以忽略!
H5还是app
例如,京东的分页效果
可以参考下getBoundingClientRect的用法,主要处理滚动的时候底部分页页数的展示,如果不需要,可以忽略!