来认识一个极简、清爽翻页器的基本逻辑

2023-09-24 18:18:22

原生翻页器，顾名思义，就是不依赖任何第三方库或框架，完全使用原生 JavaScript、HTML 和 CSS 实现的翻页器。这在项目搭建需要前后端分离，且前后端工作通常需要不同的开发团队协作的情况下非常实用。前端团队能及时完成页面布局和排版等工作，而不需要等待后端团队把数据接口和模板文件写好；后端团队则能集中精力实现业务逻辑，而不用分心去写前端代码。

这个原生翻页器由三个部分组成：

HTML 结构 ：负责定义翻页器的基本布局和样式，包括翻页按钮、当前页码和总页数等元素。
CSS 样式 ：负责定义翻页器的具体外观，包括字体、颜色、边框等。
JavaScript 代码 ：负责实现翻页器的逻辑，包括点击翻页按钮时如何更新当前页码和总页数，以及如何获取数据并更新页面内容。

1. HTML 结构

<div class="pager">
  <button class="pager-prev" disabled>上一页</button>
  <span class="pager-current">1</span>
  <span class="pager-total"></span>
  <button class="pager-next">下一页</button>
</div>

2. CSS 样式

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pager-prev,
.pager-next {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.pager-prev:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pager-current,
.pager-total {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0 10px;
}

3. JavaScript 代码

// 获取 DOM 元素
const pager = document.querySelector('.pager');
const pagerPrev = document.querySelector('.pager-prev');
const pagerCurrent = document.querySelector('.pager-current');
const pagerTotal = document.querySelector('.pager-total');
const pagerNext = document.querySelector('.pager-next');

// 当前页码
let currentPage = 1;

// 总页数
let totalPages = 1;

// 获取数据
const getData = (page) => {
  // 这里模拟从服务器获取数据
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Doe' },
        { id: 3, name: 'Peter Smith' },
      ]);
    }, 1000);
  });
};

// 更新页面内容
const updateContent = (data) => {
  // 清空原有内容
  const list = document.querySelector('.list');
  list.innerHTML = '';

  // 遍历数据并创建列表项
  data.forEach((item) => {
    const li = document.createElement('li');
    li.textContent = `ID: ${item.id}, Name: ${item.name}`;
    list.appendChild(li);
  });
};

// 更新当前页码和总页数
const updatePager = (currentPage, totalPages) => {
  pagerCurrent.textContent = currentPage;
  pagerTotal.textContent = totalPages;
};

// 禁用或启用翻页按钮
const togglePagerButtons = (currentPage, totalPages) => {
  if (currentPage === 1) {
    pagerPrev.disabled = true;
  } else {
    pagerPrev.disabled = false;
  }

  if (currentPage === totalPages) {
    pagerNext.disabled = true;
  } else {
    pagerNext.disabled = false;
  }
};

// 翻页事件处理程序
const handlePageChange = (e) => {
  e.preventDefault();

  if (e.target.classList.contains('pager-prev')) {
    currentPage--;
  } else if (e.target.classList.contains('pager-next')) {
    currentPage++;
  }

  updatePager(currentPage, totalPages);
  togglePagerButtons(currentPage, totalPages);
  getData(currentPage).then((data) => updateContent(data));
};

// 添加翻页事件监听器
pager.addEventListener('click', handlePageChange);

// 初始化翻页器
getData(currentPage).then((data) => {
  totalPages = Math.ceil(data.length / 3);
  updatePager(currentPage, totalPages);
  togglePagerButtons(currentPage, totalPages);
  updateContent(data);
});