3

我目前正在使用 vuejs 渲染分页。这是我的 algolia 数据。

我正在检查用户是否按下了上一个按钮/下一个按钮或直接输入（1、2、3 等）

    setPage: function(page) {
            if(page === 'previous') {
                // go back one page
                this.currentPage--;
                this.helper.setCurrentPage(this.currentPage).search();
            } else if(page === 'next') {
                // go forward one page
                this.currentPage++;
                this.helper.setCurrentPage(this.currentPage).search();
            } else {
                // change the currentPage with direct select(no prev/next button)
                this.helper.setCurrentPage(page).search();
            }

            // update the currentPage
            this.currentPage = this.helper.getCurrentPage();
        }

这工作正常，但我只有 0 - 4 页（页面从 0 开始）。如何确保我的 currentPage var 不会出现负数或超出我拥有的最大页面数量？

我想使用另一个 if 语句可以工作，但感觉有点草率。我正在学习 javascript 和 vue.js，所以我想知道是否有更好的方法。

4

1 回答 1

4

创建类似于属性的方法：

function nextPage(pageParam){
    if (page > MAX) {
        // Disable next btn enable prev btn
    } else { 
        // advance page 
    }
} 

function prevPage(pageParam){
    if (page =< 0 ) {
        // Disable prev btn enable next btn
    } else { 
        // go back a page 
    }

}

无论你在哪里调用 decrimentor (this.currentPage--)，你都会调用 prevPage。这使您可以集中管理行为。例如，如果您决定希望它在最后一页上点击下一页时进行轮播，它将转到第一页，您可以在一个地方实现它。

于 2015-10-07T18:43:34.097 回答