限制显示页面时的分页问题

Question

我正在处理要分页的大量数据。分页正在工作，但我被要求限制显示的页面数量并添加前进和后退按钮。我只想一次显示 5 页，并将页面计数器调整为仅显示 2 个高页和 2 个低页。例如，如果我在第 4 页，我只希望寻呼机显示 2、3、4、5、6。所以这是我的问题的 gif。

See how the pager shows the page out of range for a second before it disappears?

这是创建分页的代码。

var pagenate = function (page, totalPages) {
        maxShownPage = page + 2;
        minShownPage = page - 2;
        pageCount = [];

        if (minShownPage <= 1 && maxShownPage <= totalPages) {
            minShownPage = 1;
            maxShownPage = 5;
        }
        if (maxShownPage > totalPages) {
            maxShownPage = totalPages;
            minShownPage = totalPages - 4;
        }

        for (i = minShownPage; i <= maxShownPage; i++) {
            pageCount.push(i);
        }

    };

然后在 AngularJS 方法中我这样调用分页方法。

                howManyPages = Math.ceil(visits.SurveyCount / pageSize);
                pagenate(page, howManyPages);
                $scope.pages = pageCount;

如果你能帮我防止分页显示消失的页面。

谢谢。

Answer 1

我认为您的问题正在发生，因为您使用的是角度动画。 .ng-enter, .ng-enter-active, .ng-leave, .ng-leave-active 类导致发生淡入淡出，因此这显示了在它被转换出来之前的数字。我建议您专门为这些类创建一些 CSS 以覆盖原始功能。

如果没有看到 CSS，很难准确地告诉您应该做什么，但我会确保在这些过渡期间没有发生任何事情。这意味着您可以使用不执行任何操作的版本覆盖当前在这些类中的任何内容（不透明度、动画持续时间等）。