vue中移动端分页组件pagination

小鱼儿 2023-08-17 16:27 100阅读 0赞

最近项目需要用到很简单的vue移动端分页组件，网上找了找，没有特别适合的，根据网上找来的代码，自己写了个简单的分页

根据设计稿，想要的就是最简单的，上一页，下一页，中间固定放三个显示页数的，不需要显示很多，也不需要省略号

原博客：[https://blog.csdn.net/freya\_yyy/article/details/81227016][https_blog.csdn.net_freya_yyy_article_details_81227016]

效果图如下：

![1162042-20190814185914223-14594398.png][]

![1162042-20190814185938710-1938322139.png][]

代码如下：

pagination.vue

<template>
      <div class="pagination">
        <ul>
          <li v-if="currentPage > 1">
            <span @click="prevPage">上一页</span>
          </li>
          <li v-if="currentPage == 1">
            <span class="disabled">上一页</span>
          </li>
          <li v-for="item in indexs" v-bind:class="{'active':currentPage==item}" class="item">
            <span @click="btnClick(item)">{
        {item}}</span>
          </li>
          <li v-if="currentPage!=allPage">
            <span @click="nextPage">下一页</span>
          </li>
          <li v-if="currentPage==allPage">
            <span class="disabled">下一页</span>
          </li>
          <li><span>共<i>{
        {allPage}}</i>页</span></li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'pagination',
      props: {
        currentPage: { // 当前第几页
          type: Number,
          default: 1
        },
        allPage: { // 总页数
          type: Number,
          default: 5
        },
        showIndex: { // 中间显示几个页数，要为奇数
          type: Number,
          default: 3
        }
      },
      methods: {
        nextPage () {
          this.$emit('setPage', this.currentPage + 1)
        },
        prevPage () {
          this.$emit('setPage', this.currentPage - 1)
        },
        btnClick (num) {
          if (num !== this.currentPage) {
            this.$emit('setPage', num)
          }
        }
      },
      computed: {
        indexs () {
          var left = 1
          var right = this.allPage
          var arr = []
          var index = parseInt(this.showIndex / 2)
          var middleIndex = index + 1
          if (this.allPage >= this.showIndex) {
            if (this.currentPage > middleIndex && this.currentPage < this.allPage - index) {
              left = this.currentPage - index
              right = this.currentPage + index
            } else if (this.currentPage <= middleIndex) {
              left = 1
              right = this.showIndex
            } else {
              left = this.allPage - (this.showIndex - 1)
              right = this.allPage
            }
          }
          while (left <= right) {
            arr.push(left)
            left++
          }
          return arr
        }
      }
    }
    </script>
    
    <style scoped lang="less">
    .pagination{
      ul{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .24rem;
        li{
          height: .6rem;
          margin: .12rem;
          span{
            display: block;
            padding: 0 .12rem;
            height: 100%;
            text-align: center;
            line-height: .6rem;
            color: #E0224F;
            border: 1px solid #E0224F;
            &.disabled{
              color: #D8D8D8;
              border: 1px solid #D8D8D8;
            }
          }
          &.item{
            min-width: .6rem;
            span{
              padding: 0;
              color: #413134;
              border: 1px solid #fff;
            }
            &.active{
              span{
                color: #E0224F;
                border: 1px solid #E0224F;
              }
            }
          }
        }
      }
    }
    </style>

使用：

<template>
       <pagination :allPage="10" @setPage="setPage" :currentPage="currentPage" :showIndex="3"></pagination>
    </template>
    
    <script>
    import pagination from '@/components/pagination'
    
    export default {
      data () {
        return {
          currentPage: 1,
        }
      },
      methods: {
         setPage (page) {
            this.currentPage = page
            console.log(this.currentPage)
         }
      }
    }
    </script>

转载于:https://www.cnblogs.com/Anne3/p/11354091.html

[https_blog.csdn.net_freya_yyy_article_details_81227016]: https://blog.csdn.net/freya_yyy/article/details/81227016
[1162042-20190814185914223-14594398.png]: /images/20230810/ab9f0c81455444c9bfff99531c44d208.png
[1162042-20190814185938710-1938322139.png]: /images/20230810/49a070fac70d403dac8af7840903a84a.png