如何解决分页难题？滑动分页来帮你！

vue.js

2024-03-03 15:50:45

滑动分页：告别分页难题

引言

分页是一种常见技术，用于管理大量数据，提升用户浏览体验。滑动分页是一种创新的分页方式，它允许用户在页面可见范围内，通过平滑切换的方式浏览数据。本文将深入探讨滑动分页的实现原理，并提供详细的步骤和代码示例，帮助你解决分页难题。

什么是滑动分页

滑动分页的核心在于保持页面可见范围内的页面数量恒定。当用户点击“下一页”按钮时，可见页面会向后移动，显示新的一页。例如，如果当前可见页面为 1、2、3 和 4，点击“下一页”按钮后，页面将切换为 2、3、4 和 5。

实现滑动分页

要实现滑动分页，需要遵循以下步骤：

1. 确定可见页面数量

根据屏幕尺寸和用户体验，确定要同时显示的页面数量。

2. 计算可见页面范围

根据当前页码和可见页面数量，计算可见页面范围。

3. 更新可见页面

当用户点击“下一页”或“上一页”按钮时，更新可见页面范围并刷新页面列表。

4. 控制按钮状态

根据当前页码和总页数，禁用或启用“下一页”和“上一页”按钮。

代码示例

以下使用 Vue.js 实现滑动分页的示例代码：

<template>
  <ul class="pagination__list">
    <li class="pagination__item" v-for="pageNumber in visiblePages" :key="pageNumber">
      <router-link :to="{ query: { page: pageNumber } }" class="pagination__link" :class="{ active: pageNumber === page.number }">{{ pageNumber }}</router-link>
    </li>
  </ul>
  <router-link :to="{ query: { page: nextPage } }" class="pagination__btn-next" :class="{ inactive: page.number === totalPages }">下一页</router-link>
  <router-link :to="{ query: { page: prevPage } }" class="pagination__btn-prev" :class="{ inactive: page.number === 1 }">上一页</router-link>
</template>

<script setup>
import { onMounted, reactive, computed, watch } from 'vue';
import { useStoreRecipe } from '@/store/storeRecipe';
import { useRoute } from 'vue-router';

const route = useRoute();
const storeRecipe = useStoreRecipe();

const page = reactive({
  number: computed(() => parseInt(route.query.page) || 1),
  size: 4,
});

const totalPages = computed(() => {
  return Math.ceil(storeRecipe.recipesCount / page.size);
});

const visiblePages = computed(() => {
  const startPage = Math.max(page.number - 2, 1);
  const endPage = Math.min(startPage + 3, totalPages.value);
  return [...Array(endPage - startPage + 1).keys()].map(i => startPage + i);
});

const nextPage = computed(() => {
  return page.number + 1;
});

const prevPage = computed(() => {
  return page.number - 1;
});
</script>