更新记录

1.0.0（2026-04-21） 下载此版本

xq-pagination

1. 引入组件

直接导入到项目使用

2. 在页面中使用

3. Props 说明

参数 类型 默认值 说明 v-model:currentPage Number 1 当前页码（双向绑定） v-model:pageSize Number 10 每页条数（双向绑定） pageSizes Array [10,20,30,50,100] 可选每页条数 total Number 必填 总数据条数 layout String 'total,sizes,prev,pager,next,pages,ct' 功能块排列顺序 disabled Boolean false 是否禁用 background Boolean false 页码是否显示背景色 size String 'default' 尺寸（预留）

4. Events 说明

事件名 参数 说明 update:currentPage (page) 当前页变化时触发（v-model） update:pageSize (size) 每页条数变化时触发（v-model） current-change (page) 当前页改变时触发 size-change (size) 每页条数改变时触发

5. layout 可用标识

标识 说明 total 总条数 sizes 每页条数下拉选择器 pages 第几页下拉选择器 prev 上一页按钮 pager 页码列表（带省略号） next 下一页按钮 ct 当前页/总页数显示（如 1/10）

6. 依赖说明

本组件依赖以下 uni-ui 组件，请确保项目已安装：

uni-data-picker

uni-icons

若未安装，请执行： npm install @dcloudio/uni-ui 并在 pages.json 中配置 easycom 自动引入（通常已默认支持）。

7.注意事项

确认组件文件夹命名为 xq-pagination，便于其他开发者 easycom 自动引入。

可在插件描述中注明：支持 H5、App、微信小程序等多端，支持自定义功能块顺序，横向滚动自适应。

平台兼容性

uni-app(4.65)

其他

xq-pagination

1. 引入组件

直接导入到项目使用

2. 在页面中使用

<template>
  <view>
    <!-- 表格或其他内容 -->
    <xq-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :total="total"
      :page-sizes="[10, 20, 30, 50, 100]"
      layout="total, sizes, prev, pager, next, pages, ct"
      background
      @current-change="onPageChange"
      @size-change="onSizeChange"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Pagination from '@/components/Pagination/index.vue'

const page = ref(1)
const size = ref(10)
const total = ref(100)

function onPageChange(p) {
  console.log('当前页：', p)
  // 请求数据
}

function onSizeChange(s) {
  console.log('每页条数：', s)
  // 请求数据
}
</script>

3. Props 说明

4. Events 说明

5. layout 可用标识

6. 依赖说明

本组件依赖以下 uni-ui 组件，请确保项目已安装： uni-data-picker uni-icons

若未安装，请先安装 请在插件市场jian.dcloud.net.cn中搜索并安装 或请执行： npm install @dcloudio/uni-ui 并在 pages.json 中配置 easycom 自动引入（通常已默认支持）。

7.注意事项

如果项目并未找到uni-data-picker uni-icons这两个组件,请在插件市场jian.dcloud.net.cn中搜索并安装