更新记录

1.0.9（2025-11-10） 下载此版本

fix: 更新依赖

1.0.8（2025-11-04） 下载此版本

fix: 组件主题

1.0.7（2024-08-06） 下载此版本

修改文档

平台兼容性

uni-app(4.31)

其他

r-pagination

r-pagination分页组件,数据量过多时，采用分页的形式将数据分隔，每次只加载一个页面。

示例

<template>
  <r-config-provider>
    <view style="padding: 20rpx">
      <view style="padding: 20rpx 0">基础用法</view>
      <r-pagination
        v-model:value="currentPage"
        :total-items="24"
        :items-per-page="5"
      />
      <view style="padding: 20rpx 0">简单模式 </view>
      <r-pagination
        v-model:value="currentPage"
        :page-count="12"
        mode="simple"
      />
      <view style="padding: 20rpx 0">显示省略号 </view>
      <r-pagination
        v-model:value="currentPage"
        :total-items="125"
        :show-page-size="3"
        force-ellipses
      />
      <view style="padding: 20rpx 0">自定义按钮 </view>
      <r-pagination
        v-model:value="currentPage"
        :total-items="50"
        :show-page-size="5"
      >
        <template #prevText>
          <r-icon name="arrow-left" color="inherit" />
        </template>
        <template #nextText>
          <r-icon name="arrow" color="inherit" />
        </template>
        <template #page="{ item }">{{ item.text }}</template>
      </r-pagination>
    </view>
  </r-config-provider>
</template>
<script setup>
import { ref } from "vue";
const currentPage = ref(1);
</script>

API

Props

Slots

Events

更多组件，请前往rainui