uView Pro

主题

0

Pagination 分页 v0.3.10+ ​

19:21

分页组件（Pagination）用于在数据量较大的情况下，将数据进行分页，并允许用户进行主动点击跳转。

平台差异说明 ​

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
√√√√√√√

基本用法 ​

html
<u-pagination v-model="current" :total="21"></u-pagination>

使用图标 ​

html
<u-pagination v-model="current1" :total="35" show-icon></u-pagination>

自定义图标（仅支持内置图标） ​

html
<u-pagination
    v-model="current2"
    :total="49"
    show-icon
    prev-icon="arrow-left-double"
    next-icon="arrow-right-double"
></u-pagination>

触发 change 事件 ​

html
<template>
  <u-pagination v-model="current3" :total="50" @change="handleChange"></u-pagination>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { $u } from 'uview-pro'
import type { PaginationChangePayload } from 'uview-pro/types/global';

const current3 = ref(1);

// 触发 change 事件
function handleChange(val: PaginationChangePayload) {
    $u.toast(`触发器被点击：${val.type}`);
}

API ​

Props ​

参数说明类型默认值可选值
prevText左侧按钮文字String上一页-
nextText右侧按钮文字String下一页-
total总条目数NumberNumber-
pageSize每页数据量Number10-
showIcon是否以 icon 形式展示按钮Booleanfalse-
prevIcon左侧按钮图标，仅支持内置图标Stringarrow-left-
nextIcon右侧按钮图标，仅支持内置图标Stringarrow-right-

Events ​

事件名说明回调参数
change切换分页事件{ type: string, current: number } current 为当前页，type 值为：next/prev，表示点击的是上一页还是下一页

Slots ​

名称说明
default分页内容