更新记录

1.2.1（2024-03-13）

优化代码

1.2.0（2023-06-21）

1. 更改样式使用scss，未安装的请自行安装；
2. 样式单位rpx更改为px;
3. 新增 不显示页码边框 属性；
4. 新增属性layout，自定义分页排版；
5. 新增每页条数预设值属性(pageSizes)，可选择每页条数，同时新增每页条数切换时触发的事件；
6. 移除showAround、showPageInfo和showGoPage属性，功能合并到layout中；

1.1.2（2022-11-09）

解决nvue页面样式错乱问题

平台兼容性

分页器

简单介绍

• 组件需要依赖 sass 插件 ，请自行安装；
• 可自定义显示分页信息，如总条数，每页条数等；
• 欢迎大家下载使用，项目源码示例：https://gitee.com/lunc9932/pagination
• 若有插件导入失败，重启编辑器；

API

属性说明

注意：

1. 当showPageSize属性数值过大时，可能会出现横向滚动条；
2. 当showPageSize属性数值小于3，且forceEllipses或numAround为 true 时，中间页码将无法显示；
3. 只有当 总页码数 超过showPageSize，且属性forceEllipses或numAround为 true 时，省略号才能显示出来；
4. layout分页排版，同样可自定义分页信息显示顺序；
5. 自定义分页信息只需在<page-pagination>标签内自定义即可，并不需要写属性；
6. 原showAround(是否显示首尾页)、showPageInfo(是否显示分页信息)和showGoPage(是否显示input输入框)属性已失效，功能已合并到layout属性中；
7. 由于移动端屏幕宽度限制，total、limit和jumper 将显示在页码的下面；PC端(>=450px，可自行在组件样式中修改)显示一行且按照layout属性中的顺序显示；
8. 总条数(total)和当前页数(currentPage)是可以动态改变的，请参考项目示例；

事件说明

type返回类型

注意：

1. 重复点击同一个页码，不会触发 change 事件，避免不必要的刷新；

基本用法

在template中使用组件

<view class="example-con">总页数：{{page.total}}，当前第{{page.currentPage}}页</view>
<view class="example-btn">
  <view @click="changeTotal">更改总页数555条</view>
  <view style="margin-left: 50px;" @click="changeCurrentPage">更改到第3页</view>
</view>

<view class="title">默认</view>
<page-pagination :total="page.total" :pageSize="page.pageSize" :currentPage="page.currentPage"
  @change="change"></page-pagination>

<view class="title">简单模式（mode="simple"）</view>
<page-pagination :total="page.total" mode="simple"></page-pagination>

<view class="title">无边框（showBorder="false"）</view>
<page-pagination :total="page.total" :currentPage="page.currentPage" :showBorder="false"></page-pagination>

<view class="title">使用汉字表示(btnText)及显示省略号(forceEllipses)</view>
<page-pagination :total="page.total" :btnText="true" :forceEllipses="true"></page-pagination>

<view class="title">保留页码中的第一页和最后一页(numAround)</view>
<page-pagination :total="page.total" :numAround="true" :showBorder="false"></page-pagination>

<view class="title">附加功能(总条数、每页条数 及 页码跳转)(layout)</view>
<page-pagination :total="page.total" layout="total,first,prev,page,next,last,limit,jumper"></page-pagination>

<view class="title">附加功能自定义显示分页项及排列顺序 和<br>自定义每页显示个数选择器的选项设置(pageSizes)</view>
<page-pagination class="test-pagination" :numAround="true" :total="page.total" layout="page,prev,next,limit,total"
  :pageSizes="[10,50,60,100]" @sizeChange="sizeChange">
</page-pagination>

<view class="title">自定义显示分页信息</view>
<page-pagination :total="page.total" :pageSize="page.pageSize" :showBorder="false" :numAround="true">
  <view>total：{{page.total}}，pageSize：{{page.pageSize}}</view>
</page-pagination>

<view class="title">大号按钮(size="large")</view>
<page-pagination :total="page.total" :showBorder="false" :showPageSize="4" size="large"></page-pagination>

<view class="title">小型按钮(size="small")</view>
<page-pagination :total="page.total" :showBorder="false" :showPageSize="6" size="small"></page-pagination>

<view class="title">自定义颜色(color="#F56C6C")</view>
<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#F56C6C"></page-pagination>
<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#67C23A"></page-pagination>
<page-pagination :total="page.total" :forceEllipses="true" :btnText="true" color="#FF00E3"></page-pagination>

在script中使用

export default {
  data() {
    return {
      page: {
        total: 10000,
        pageSize: 50,
        currentPage: 2
      }
    }
  },
  methods: {
    change(currentPage, type) { // 当前页改变
      this.page.currentPage = currentPage;
      console.log("点击了" + type + "，当前页：" + currentPage);
    },
    sizeChange(pageSize) { // 每页条数改变
      this.page.pageSize = pageSize;
      console.log("每页", pageSize, "条");
    },
    changeTotal() { // 更改总条数
      this.page.total = 555
    },
    changeCurrentPage() { // 更改当前页
      this.page.currentPage = 3
    }
  }
}