分页逻辑- Vue
分页逻辑- Vue
提问于 2021-02-18 09:22:38
嘿，希望有人能帮我，我已经开始了一份新的工作，我的大脑变成了废话，看似简单的任务现在给我带来了麻烦，就像我在上一份工作中离开了我的大脑一样？无论如何，我有一些分页，我试图建立逻辑。
我有一个v-for循环，它通过数据构建分页，使用索引号作为页码。我还知道什么页码是活动的，以及总页数。我使用v-if来显示或隐藏分页项。我想在任何时候显示8个项目，并隐藏其余的，所以如果第2页是活动的，项目2-9将显示和休息将被隐藏，该部分工作良好。我想要做的是，当我接近列表的末尾时，我仍然希望在屏幕上保留8个项目，而活动项目只是前进，也就是说，总共有9个项目，第2项设置为活动项，在屏幕上我可以看到第2-9项，当我单击next时，我仍然希望屏幕上有8个项目(2-9项)，但是现在活动项是第3项，等等。这是否可以使用v-如果，或者我正在放松情节，并试图实现不可能？
<div v-for="index in totalPages" :key="index">
<div
v-if="
index >= activeItem &&
index < activeItem + onScreenTotal
"
:class="index === activeItem ? 'active' : null"
>
{{ index }}
</div>
</div>- totalPages =分页总数items
- activeItem =活动页item
- onScreenTotal =我想在任何时候在屏幕上显示多少项
回答 1
Stack Overflow用户
发布于 2021-02-18 10:11:39
您可以使用一些Math.min(..)和Math.max(..)调用，但是模板会变得非常混乱。我建议将逻辑移动到计算属性。您可以从当前页面开始，或者在结束之前使用this.onScreenTotal页面，如果您的页面小于this.onScreenTotal页面，您希望从第1页开始，而不是0或某些负数。你可以用同样的方式计算结束，但我们永远不会超过我们拥有的页面数。
<template v-for="index in visiblePages">
<div :key="index" :class="{ active: index === activeItem }">
{{ index }}
</div>
</template>
// And in your javascript
computed: {
visiblePages() {
const pages = [];
const start = Math.max(1, Math.min(this.activeItem, this.totalPages - this.onScreenTotal));
const end = Math.min(start + this.onScreenTotal, this.onScreenTotal);
for (const i = start; i <= end; i++) {
pages.push(i);
}
return pages;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66256984
复制相关文章
相似问题
腾讯云开发者
