javascript - Can anyone provide a method for mobile h5 drop-down paging?

Question

Which master can provide a method for drop-down paging on the mobile terminal

Answer 1

H5 or app

Answer 2

For example, JD.com’s paging effect

$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);
                    });                 

You can refer to the usage of getBoundingClientRect, which mainly handles the display of the number of pagination pages at the bottom when scrolling. If not needed, you can ignore it!