带点的按钮分页

Posted 2023-02-16

【中文标题】带点的按钮分页

【英文标题】：Button pagination with dots

【发布时间】：2021-11-11 14:17:48

【问题描述】：

我正在练习 vue，我正在尝试与 Rick Morty Api https://rickandmortyapi.com/documentation/ 建立分页

目前的样子：

Table

我想以1 2 3 4 5 ... 20 的形式显示这些按钮，如果我点击 20，那么它看起来就像1 ... 15 16 17 18 19 20。我怎样才能做到这一点？我需要为此使用 css 还是纯 js 并使用计算属性？

<div class="button_container">
        <button @click="pageChange(i + 1)" v-for="(item, i) in pages" :key="i">
           i + 1 
        </button>
      </div>

【参考方案1】：

单线操作并不是那么简单，我推荐的方法是使用computed

你可以使用https://***.com/a/67658442/197546的函数

// define method
function paginate(current_page, last_page, onSides = 3) 
  // pages
  let pages = [];
  // Loop through
  for (let i = 1; i <= last_page; i++) 
    // Define offset
    let offset = (i == 1 || last_page) ? onSides + 1 : onSides;
    // If added
    if (i == 1 || (current_page - offset <= i && current_page + offset >= i) ||
        i == current_page || i == last_page) 
        pages.push(i);
     else if (i == current_page - (offset + 1) || i == current_page + (offset + 1)) 
        pages.push('...');
    
  
  return pages;


// then in component...
data:
  return
    pages:[...],
    currentPage: 0,
  
,
//...
computed: 
  pageNums = () 
    return paginate(this.currentPage, this.pages.length, 4)
  

那么，因为...不应该有事件监听器，你可以使用<template>和v-if来使用不同的元素

<div class="button_container">
  <template v-for="(pageNum, i) in pages" :key="i">
    <button v-if="Number.isInteger(pageNum)" @click="currentPage = i">
       pageNum 
    </button>
    <span v-else>
       pageNum 
    </span>
  </template >
</div>

【讨论】：

嗯，它不返回任何点，只是从 1 到 34 个按钮

您的意思是v-for pageNum in pageNums 而不是in pages？

本意为<template v-for="(pageNum, i) in pages" :key="i">

仍然需要i 作为密钥