javascript - Kann jemand eine Methode für mobiles H5-Dropdown-Paging bereitstellen?

Question

Welcher Master kann eine Methode für Dropdown-Paging auf dem mobilen Endgerät bereitstellen?

Answer 1

H5还是app

Answer 2

例如，京东的分页效果

$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的用法，主要处理滚动的时候底部分页页数的展示，如果不需要，可以忽略！