vue手搓分页实现‘...‘功能。

最新推荐文章于 2023-02-23 18:48:59 发布

落魄的小前端

最新推荐文章于 2023-02-23 18:48:59 发布

阅读量789

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/z12845464/article/details/122552726

版权

前言

大家好，我是尤雨海。。。

一、分页中常见的省略号出现的三种情况。

第一种

在这里插入图片描述

第二种

在这里插入图片描述

第三种

在这里插入图片描述

二、代码解析

逻辑分析：

//这里使用计算属性，因为它有缓存。
  computed: {
    pagesum()//总页数 {  
      let pagesum = Math.ceil(this.totle / this.pagesize); //总页数随着每页显示数量的改变而改变
      let pageNow = this.pageNow;  //当前的页数
      if (pagesum <= 5) {   //如果总页数小于5，直接返回。
        return pagesum;
      } else {  
      //如果总页数大于5，并且当前页数小于等于4，返回第一种情况的数组，省略号在后面。
        if (pageNow <= 4) {
          return [1, 2, 3, 4, 5, "...", pagesum];  
        } else if (pageNow >= pagesum - 4) {  //如果当前页数大于等于总页数减4，返回第三种情况的数组，也就是省略号在前面
          return [
            1,
            "...",
            pagesum - 5,
            pagesum - 4,
            pagesum - 3,
            pagesum - 2,
            pagesum - 1,
            pagesum,
          ];
        } else {
        //否则的话，就返回第二种情况，前后都有省略号。
          return [1, "...", pageNow - 1, pageNow, pageNow + 1, "...", pagesum];
        }
      }
    },
  },

页面上展示：

 <span
        v-for="(item, index) in pagesum"
        :key="index"
        >{{ item }}
 </span>

    //点击分页的时候，遇到...阻止向下进行。
    changepageNow(i) {
      if (i == "...") {
        return;
      }
      this.pageNow = i;
      this.$emit("changepageNow", i);
    },