曾经蜡笔没有小新2017-06-12 09:29:28
例如，京东的分页效果
$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的用法，主要处理滚动的时候底部分页页数的展示，如果不需要，可以忽略！