uni-app分页器组件（page-pagination）: uni-app前端分页组件

分页器

简单介绍

通过uni_modules引用组件，在页面template中即可直接使用，无需在页面中import和注册components；
可自定义显示分页信息，如总条数，每页条数等；
欢迎大家下载使用，项目源码示例：https://gitee.com/lunc9932/pagination

API

属性说明

属性名	类型	默认值	说明
total	Number	0	数据总条数
pageSize	Number	10	每页显示条数
currentPage	Number	1	当前页数
mode	String	multi	显示模式，可选值：multi / simple multi：标准模式；simple：简单模式，只显示当前页/总页数
showAround	Boolean	false	是否显示首页和尾页按钮
btnText	Boolean	false	上页、下页、首页和尾页是否使用汉字，默认使用箭头表示
showPageSize	Number	5	显示的页码个数，当使用 forceEllipses 和 numAround 属性时，中间显示的页码个数将减2
forceEllipses	Boolean	false	总页码数超过 showPageSize 时，是否显示省略号
numAround	Boolean	false	是否保留页码中的第一页和最后一个，为true时不再显示首页和尾页，优先级高于 showAround 和 forceEllipses
size	String	normal	按钮大小，可选值：large / normal / small large：大号按钮；normal：普通按钮(默认)；small：小型按钮
color	String	#1989FA	自定义按钮文字颜色
showPageInfo	Boolean	false	是否显示分页信息，如总条数，每页条数等
showGoPage	Boolean	false	是否显示页码input输入框，跳转页码
trigger	String	blur	页码input输入框跳转页码触发方式，可选值：blur / click blur：失去焦点时触发；click：点击跳转按钮触发值为blur时，不会显示跳转按钮

注意：

当 showPageSize 属性数值过大时，可能会出现横向滚动条；
当 showPageSize 属性数值小于3，且forceEllipses 或 numAround 为 true 时，中间页码将无法显示；
只有当总页码数超过 showPageSize，且属性 forceEllipses 或 numAround 为 true 时，省略号才能显示出来；
自定义分页信息只需在<page-pagination>标签内自定义即可，并不是写属性；

事件说明

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

事件名	说明	返回值
@change	页码改变时触发	currentPage：当前页；type：点击的类型，详细见下面说明

type返回类型

类型	说明
page	表示点击的是页码
prev	点击的是上页
next	点击的是下页
homePage	点击的是首页
endPage	点击的是尾页
goPage	页码input输入框触发

基本用法

在template中使用组件

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

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

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

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

<view class="title">设置中间页码显示个数</view>
<page-pagination :total="page.total" :pageSize="page.pageSize" :showAround="true" :showPageSize="7"></page-pagination>

<view class="title">显示分页信息</view>
<page-pagination :total="page.total" :pageSize="page.pageSize" :showAround="true" :btnText="true" :showPageInfo="true"></page-pagination>

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

<view class="title">自定义输入页码(可选择触发方式)</view>
<page-pagination :total="page.total" :pageSize="page.pageSize" :showAround="true" :btnText="true" :showGoPage="true" trigger="click"></page-pagination>

<view class="title">大号按钮</view>
<page-pagination :total="page.total" :pageSize="page.pageSize" :btnText="true" :showAround="true" :showPageSize="4" size="large"></page-pagination>

<view class="title">小型按钮</view>
<page-pagination :total="page.total" :pageSize="page.pageSize" :showAround="true" size="small" :showPageSize="8"></page-pagination>

<view class="title">自定义颜色</view>
<page-pagination :total="page.total" :pageSize="page.pageSize" :forceEllipses="true" :showAround="true" color="#F56C6C" :btnText="true"></page-pagination>
<page-pagination :total="page.total" :pageSize="page.pageSize" :btnText="true" :showAround="true" color="#67C23A" style="margin-top: 15rpx;"></page-pagination>
<page-pagination :total="page.total" :pageSize="page.pageSize" color="#FF00E3" :showAround="true" style="margin-top: 15rpx;"></page-pagination>

在script中使用

export default {
  data() {
    return {
      page:{
        total: 88,
        pageSize: 10,
        currentPage: 1
      }
    }
  },
  onLoad() { },
  methods: {
    change(currentPage, type){
      this.page.currentPage = currentPage;
      console.log("点击了" + type +"，当前页：" + currentPage);
    }
  }
}

fork_libs / uni-app分页器组件（page-pagination）

分页器

简单介绍

API

属性说明

事件说明

type返回类型

基本用法

简介

发行版

贡献者

近期动态

fork_libs / uni-app分页器组件（page-pagination） .gitee-modal { width: 500px !important; }

分页器

简单介绍

API

属性说明

事件说明

type返回类型

基本用法

简介

发行版

贡献者

近期动态

搜索帮助

fork_libs / uni-app分页器组件（page-pagination）