Vue pagination 分页组件

今天下午有时间，临时写一个分页组件，分享一下实现的思路和方法

先看一下效果, 当页数小于等于 7 的时候

image.png
当页数大于 7 的时候

image.png
先写出来基础的样式代码
html

 <template>
   <div class="sc-pagination-container">
     <ul class="page_number-wrapper">
       <li class="slide-number" 
         v-for="(num, key) in pageList"
         :key="key"
         @click="go(num)">
           {{ num }}
       </li>
     </ul>
 </div>
</template>

<script>
export default {
  name: 'pagination',

  props: {
    currentPage: {
      type: Number,
      default: 1,
      validator(val){ return val >= 0 }
    },
    total: {
      type: Number,
      validator(val){ return val >= 0 }
    }
  },

  data() {
    return {
      pageCount: 7
    }
  },

  computed: {
    pageList() {
      const { currentPage, total, pageCount } = this
      let numAry = []
      for (let i = 1; i < pageCount + 1; i++) {
        numAry.push(i)
      }
      return numAry
    }
  },

  methods: {
    go(page) {
      this.$emit('update:currentPage', Number(page));
    }
  }
}

先来看一下效果

image.png
基本的点击切换分页的效果已经实现了. 还少一个 avtive 的效果，下面加一下

 <li class="slide-number"
    v-for="(num, key) in pageList"
    :key="key"
    :class="{active: currentPage === num}"
    @click="go(num)">
      {{ num }}
 </li>

image.png

现在虽然实现了基础功能，但当页数过多时，要怎么处理?

先说一下我的思路: 首先有两个页数是可以确定的，就是第一页1，和最后一页 total
那我们就先把这两页写死，剩下的中间部分，我们通过动态计算的方式实现。

先把第一个页和最后一页加上

<li 
  class="slide-number"
  :class="{active: currentPage === 1}"
  @click="go(1)">
     1
 </li>

<li
  class="slide-number"
  :class="{active: currentPage === total}"
  @click="go(total)">
    {{ total }}
</li>

在把中间的 ... 加上，这里我直接用的标点符号，项目中其实应该用icon图标字体。

 <li class="dots">
    <span>...</span>
 </li>

然后把计算部分的代码改一下

 pageList() {
      const { currentPage, total, pageCount } = this
      let numAry = []
      let showPrevMore = false
      let showNextMore = false
      // 判断是否展示 icon
      if (total > pageCount) {
        if (currentPage > pageCount - 3) {
          showPrevMore = true
        }
        if (currentPage < total - 3) {
          showNextMore = true
        }
      }
      // 这里我说的上 表示 上按钮icon，下 表示 下按钮 icon
      // 当显示上 并不展示 下 
      if (showPrevMore && !showNextMore) {
        const startPage = total - (pageCount - 3)
        for(let i = startPage; i < total; i++) {
          numAry.push(i)
        }
      } else if (!showPrevMore && showNextMore) { // 右显示 
        for (let i = 2; i < pageCount - 1; i++) {
          numAry.push(i)
        }
      } else if (showPrevMore && showNextMore) { // 两边都展示
        const count = Math.floor(pageCount/2) - 2
        for (let i = currentPage - count; i <= currentPage + count; i++) {
          numAry.push(i)         
        }
      } else {
        for (let i = 2; i < total; i++) {
          numAry.push(i)
        }
      }
      this.showPrevMore = showPrevMore
      this.showNextMore = showNextMore
      return numAry
    }

稍微解释一下上面 if else 的意思
第一个. 判断是否显示 ... 这个icon 当总数大于 pageCount 也就是 7 的时候展示，然后在判断展示哪一个或者两个都展示。
第二个. if 当只展示左边icon 计算要显示的页数，也就是下面这种情况时

image.png

else if 只展示右边的 icon 是，计算要显示的页数

image.png

else if 如果两个 icon 都展示，计算只显示的页数

image.png

else 最后是，以上条件都不满足，说明 total 小于 7 就展示全部

image.png

还有一个当总数小于 7 时，不要忘了在固定的 1 和最后一页要加判断是否展示的哦

第一页.png

最后一页.png
好了上面的代码就完成了分页的基本功能了，希望看到的人，能帮助到你。
github 地址

最后编辑于：2020.03.22 17:36:34