Pagination 分页 | uView Next - 全面兼容 nvue 的 uni-app 生态框架

# Pagination 分页新

该组件用于分隔长列表，每次只加载一个页面。适用于数据量较大的场景，通过分页的方式提升用户体验和页面性能。

注意

VUE2版本下，微信小程序会控制台会报 More than one slot named "page" are found inside a single component instance 的警告，VUE3版本无问题，推荐使用VUE3

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

# 基本使用

最简单的用法，通过v-model绑定当前页码，设置total总记录数。

<template>
  <u-pagination v-model="currentPage" :total="100" :page-size="10" @change="pageChange"></u-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1
    }
  },
  methods: {
    pageChange(page) {
      console.log('当前页码:', page)
    }
  }
}
</script>
✅ Copy success!

# 简单模式

通过设置simple为true，可以使用简单模式，只显示当前页数和总页数。

<u-pagination 
  v-model="currentPage" 
  :total="100" 
  :page-size="10" 
  simple
></u-pagination>
✅ Copy success!

# 自定义样式

可以通过相关属性自定义分页器的外观。

<u-pagination 
  v-model="currentPage" 
  :total="100" 
  :page-size="10"
  bg-color="#f0f0f0"
  active-bg-color="#007aff"
  active-color="#ffffff"
  color="#333333"
  round="8px"
  item-width="36px"
  item-height="36px"
></u-pagination>
✅ Copy success!

# 自定义按钮文字

<u-pagination 
  v-model="currentPage" 
  :total="100" 
  :page-size="10"
  prev-text="上一页"
  next-text="下一页"
></u-pagination>
✅ Copy success!

# 省略号模式

当页数过多时，可以通过force-ellipses显示省略号。

<u-pagination 
  v-model="currentPage" 
  :total="1000" 
  :page-size="10"
  :pager-count="5"
  force-ellipses
></u-pagination>
✅ Copy success!

# 禁用状态

通过disabled属性可以禁用分页器。

<u-pagination 
  v-model="currentPage" 
  :total="100" 
  :page-size="10"
  disabled
></u-pagination>
✅ Copy success!

# 自定义插槽

可以通过插槽自定义按钮内容。

<u-pagination
   v-model="currentPage" 
   :total="204" 
   :page-size="5" 
   :pager-count="3" 
   :force-ellipses="true"
   :border-color="false"
   :bg-color="false"
   :active-bg-color="false"
>
   <template v-slot:prev="{disabled}">
      <text>👈</text>
   </template>
   <template v-slot:page="{label, active}">
      <text>{{label}}</text>
   </template>
   <template v-slot:next="{disabled}">
      <text>👉</text>
   </template>
</u-pagination>
✅ Copy success!

# API

# Props

参数	说明	类型	默认值	可选值
modelValue	当前页码（Vue3，优先级高于value）	Number	1	-
value	当前页码（Vue2或Vue3备用）	Number	1	-
total	总记录数	Number	0	-
pageSize	每页显示的记录数	Number	10	-
pagerCount	显示的页码按钮数量	Number	5	-
disabled	是否禁用分页	Boolean	false	true
forceEllipses	是否显示省略号	Boolean	false	true
simple	是否为简单分页	Boolean	false	true
showPrevButton	是否展示上一页按钮	Boolean	true	false
showNextButton	是否展示下一页按钮	Boolean	true	false
prevText	上一页按钮文字	String	'上一页'	-
nextText	下一页按钮文字	String	'下一页'	-
bgColor	背景色	String \| Boolean	'#f7f7f7'	-
color	文本色	String	'#606266'	-
activeBgColor	激活背景色	String \| Boolean	'#2979ff'	-
activeColor	激活文本色	String \| Boolean	'#ffffff'	-
fontSize	字体尺寸	String	'14px'	-
round	圆角	String	'4px'	-
borderColor	描边色	String \| Boolean	'#e4e7ed'	-
itemWidth	每项宽度	String	'34px'	-
itemHeight	每项高度	String	'34px'	-
customStyle	自定义样式	Object	{}	-

# Events

事件名	说明	回调参数
change	切换分页时触发	page: 当前页码

# Slots

名称	说明	参数
prev	自定义上一页按钮内容	disabled: 是否禁用
next	自定义下一页按钮内容	disabled: 是否禁用
page	自定义页码按钮内容	label: 页码标签, active: 是否激活

← Cascader 级联选择器 Popover 气泡提示 →

# Pagination 分页 新